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.
CodePudding user response:
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>
CodePudding user response:
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>
CodePudding user response:
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>