Display content in the card when hover - html

Question

I have a card item as you see in the picture, opacity is 0.5:
When I hover I want to display some information on it like in the picture again:
So here is my example;
.card-img {
width: 100%;
border-radius: calc(0.3rem - 0px);
}
.card-img-top {
width: 100%;
border-radius: 32px;
opacity: 0.5;
}
.card-img-top:hover {
opacity: 1;
}
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="img/banner-1.png" alt="Open Project 1">
<div class="banner-content">
Description
</div>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</a>
</div>
</div>
So what I am trying to achieve in this example, when I hover I want to display Description (banner-content) and I want to set the opacity to 1 which I am already doing.

Answer 1

You can use + selector wicth select the adjacent sibling. More on mdn
.card{
position:relative;
}
.card-img {
width: 100%;
max-width:150px;
border-radius: calc(0.3rem - 0px);
}
.card-img-top {
border-radius: 32px;
opacity: 0.5;
width:150px;
}
.card-img-top:hover {
opacity: 1;
}
.banner-content{
position:absolute;
top:0;
left:0;
display:none;
}
.card-img-top:hover + .banner-content{display:block;}
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="https://via.placeholder.com/50" alt="Open Project 1">
<div class="banner-content">
Description
</div>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</a>
</div>
</div>

Answer 2

Step 1: I make a .top-layout class with opacity: 0 to keep it hide by default.
Step 2: Use .card:hover .top-layout selector in CSS to set what style you want when the card item is hover.
.card {
width: 100%;
border-radius: calc(0.3rem - 0px);
}
.card:hover .top-layout {
opacity: 0.5 !important;
}
.top-layout {
opacity: 0;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
.card-img-top {
width: 100%;
border-radius: 32px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="https://image.freepik.com/free-vector/comic-colorful-frame-background_52683-71995.jpg" alt="Open Project 1">
<div class="top-layout">
<div class="banner-content">
Description
</div>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</div>
</a>
</div>
</div>

Answer 3

Put a Adjacent Sibling Selector when you hover on img and display the content .
+ is used here which selects the first .banner-content element that is placed immediately after .card-img-top element .
Find more info here about combinators
.card {
position: relative;
}
.banner-content {
position: absolute;
top: 20px;
left: 20px;
display:none;
}
.card-img {
width: 100%;
border-radius: calc(0.3rem - 0px);
}
.card-img-top {
width: 400px;
height:200px;
border-radius: 32px;
opacity: 0.5;
}
.card-img-top:hover {
opacity: 1;
}
.card-img-top:hover + .banner-content {
display: block;
}
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="https://pixy.org/src/477/4774988.jpg" alt="Open Project 1">
<div class="banner-content">
I am a new coder.<br> Happy to meet : )
</div><br>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</a>
</div>
</div>