0
156
ViewsCSS: image changes on hoverp
in my code i have card with background image that i'm trying to hover over it to display another card layer with image transparent to show inner card layer as shown in attached images below, my problem is i'm not able to figure out the transparent image in card.. i tried to add a real transparent image but it didn't work, is there a way to acheive the same in below image? thanks in advance
<div class="card Fast-Growing ">
<img class="card-img-top icon" src="assets/images/recons.png" loading="lazy">
<div class="row-hr">
<hr class="dot-hr">
<hr>
</div>
<div class="card-body">
<h6 class="card-title">Reconstructing The Business</h6>
</div>
<div class="card Fast-Growing-hovered ">
<div class="card-body">
<h6 class="card-title">Reconstructing The Business</h6>
</div>
</div>
</div>
·
Juan Pablo Isaza
2 answers
Answer question0
you can use CSS properties visibility: hidden; or display: none
·
Juan Pablo Isaza
Report
0
Add some CSS to make the <img /> tag disappear on hover like so. Modify the transition duration as you like but this is the idea.
.card-img-top {
transition: opacity 0.25s ease-in-out;
opacity: 1;
}
.card-img-top:hover {
opacity: 0;
}
·
Juan Pablo Isaza
Report
Answer question