Basic example
Hover effect appears when a user positions computer cursor over an element without activating it.
<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>
Color
Change the color and opacity by manipulating color and .hover:opacity-* classes. Have a look at our masks docs to learn more.
<div class="grid grid-cols-3 gap-4">
<div class="mb-4">
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-50 transition duration-300 ease-in-out bg-indigo-700"></div>
</div>
</div>
<div class="mb-4">
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-20 transition duration-300 ease-in-out bg-purple-700"></div>
</div>
</div>
<div class="mb-4">
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-70 transition duration-300 ease-in-out bg-green-700"></div>
</div>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="mb-4 md:mb-0">
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-30 transition duration-300 ease-in-out bg-red-700"></div>
</div>
</div>
<div class="mb-4 md:mb-0">
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-40 transition duration-300 ease-in-out bg-white"></div>
</div>
</div>
<div class="mb-4 md:mb-0">
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden bg-fixed opacity-0 hover:opacity-60 transition duration-300 ease-in-out bg-blue-400"></div>
</div>
</div>
</div>
Gradient
Set a fancy gradient as an overlay.
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs" alt="Louvre" />
<div class="absolute top-0 right-0 bottom-0 left-0 w-full h-full overflow-hidden opacity-0 transition duration-300 ease-in-out bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:opacity-70"></div>
</div>
Zoom
Use .hover:scale-110 class to any element to apply zoom.
<div class="relative overflow-hidden bg-no-repeat bg-cover max-w-xs">
<img src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp" class="max-w-xs hover:scale-110 transition duration-300 ease-in-out" alt="Louvre" />
</div>
Shadow
Use .hover:shadow-lg class to any element to apply the effect.
<img
src="https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp"
class="max-w-xs hover:shadow-lg transition duration-300 ease-in-out"
alt="Louvre"
/>
If you are looking for more advanced options, try Bootstrap Hover effects from MDBootstrap.