<div
class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs"
data-mdb-ripple="true" data-mdb-ripple-color="light"
>
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<a href="#!">
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-100 transition duration-300 ease-in-out" style="background-color: rgba(251, 251, 251, 0.2)"></div>
</a>
</div>Hover Effects
The code contains two divs. The first div has a class of "relative overflow-hidden bg-no-repeat bg-cover max-w-xs", which will make it disappear if it covers any other part of the page. The second div has a class of "absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-100 transition duration-300 ease-in-out". This will create an absolute positioned div that will take up the whole screen and will be hidden until the user hovers their mouse over it. The background color is set to rgba(251, 251, 251, 0.2).
0 Comments
Add Comment
Log in to add a comment