Tailwind CSS Hover Effects
Tailwind CSS hover effects appears when the user positions the computer cursor over an element without activating it.These effects can enhance the user experience by providing visual feedback and making your website or application more engaging.
Basic example
Hover effect appears when a user positions computer cursor over an element without activating it.
<div class="w-full relative max-w-sm mx-auto h-auto ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full max-w-sm mx-auto h-auto relative z-0">
<a href="#" class=" absolute w-full h-full top-0 left-0 bg-white opacity-0 z-10 transition-opacity duration-300 hover:opacity-20 "></a>
</div>Opacity hover effect
Below are some tailwind hover effects where opacity layer can be used as a hover effect.
- Tailwind hover transition: used to animate the chaged properties on hover,
- duration-x: used to define the duration of the animation where x is the time in milliseconds; e.g. duration-300..
- Then, you should be able to add any type of animation by changing the property on hover by using the class: [hover:tw-class-name] e.g. hover:opacity-20.
Color
Change the color and opacity by manipulating color and .hover:opacity-* classes.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="w-full relative max-w-sm mx-auto h-auto ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full max-w-sm mx-auto h-auto relative z-0">
<a href="#" class=" absolute w-full h-full top-0 left-0 bg-indigo-600 opacity-0 z-10 transition-opacity duration-300 hover:opacity-40 "></a>
</div>
<div class="w-full relative max-w-sm mx-auto h-auto ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full max-w-sm mx-auto h-auto relative z-0">
<a href="#" class=" absolute w-full h-full top-0 left-0 bg-emerald-600 opacity-0 z-10 transition-opacity duration-300 hover:opacity-40 "></a>
</div>
<div class="w-full relative max-w-sm mx-auto h-auto ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full max-w-sm mx-auto h-auto relative z-0">
<a href="#" class=" absolute w-full h-full top-0 left-0 bg-amber-600 opacity-0 z-10 transition-opacity duration-300 hover:opacity-40 "></a>
</div>
<div class="w-full relative max-w-sm mx-auto h-auto ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full max-w-sm mx-auto h-auto relative z-0">
<a href="#" class=" absolute w-full h-full top-0 left-0 bg-red-600 opacity-0 z-10 transition-opacity duration-300 hover:opacity-40 "></a>
</div>
<div class="w-full relative max-w-sm mx-auto h-auto ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full max-w-sm mx-auto h-auto relative z-0">
<a href="#" class=" absolute w-full h-full top-0 left-0 bg-white opacity-0 z-10 transition-opacity duration-300 hover:opacity-40 "></a>
</div>
<div class="w-full relative max-w-sm mx-auto h-auto ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full max-w-sm mx-auto h-auto relative z-0">
<a href="#" class=" absolute w-full h-full top-0 left-0 bg-black opacity-0 z-10 transition-opacity duration-300 hover:opacity-40 "></a>
</div>
</div>Zoom in/out
Use .hover:scale-* class to any element to apply zoom, Use following tailwind hover example.
<div class="w-full relative">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="w-full relative mx-auto h-auto overflow-hidden rounded-lg ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full h-auto relative z-0 rounded-lg transition-all duration-300 hover:scale-110">
</div>
<div class="w-full relative mx-auto h-auto overflow-hidden rounded-lg ">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full h-auto relative z-0 rounded-lg scale-110 transition-all duration-300 hover:scale-100">
</div>
</div>
</div>Shadow on hover in tailwind
Use .transition-shadow class to the element to apply a shadow hover effect.
<div class="w-full relative">
<div class="w-full relative h-80 flex items-center justify-center p-2">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="rounded-md max-w-sm mx-auto h-auto shadow-none transition-shadow duration-300 cursor-pointer hover:shadow-lg hover:shadow-gray-400">
</div>
</div>Card Zoom Effect
Use below card hover tailwind example where card can be zoom out on hover.
Hover over me!
<div class="w-full relative h-80 flex items-center justify-center p-2">
<div class="transform h-64 bg-indigo-400 w-80 hover:bg-indigo-600 transition duration-500 hover:scale-125 flex justify-center items-center">
<p class="text-lg text-white">Hover over me!</p>
</div>
</div>Gradient Effect
You can add gradient effect on hover over card using tailwind utility classes.
Hover over me
<div class="w-full relative ">
<div class="mx-auto w-72 h-60 bg-indigo-300 cursor-pointer hover:bg-gradient-to-t from-indigo-300 via-indigo-400 to-indigo-500 transition-all duration-300 ease-in-out flex justify-center items-center">
<h2 class="text-black">Hover over me</h2>
</div>
</div>Cross Image hover Effect
You can add hover effects to your image using tailwind transform properties eg: hover:rotate-6 , hover:scale-110
<div class="w-full relative ">
<div class=" group h-72 w-80 mx-auto flex justify-center text-center relative overflow-hidden rounded-md cursor-pointer">
<img src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" class="w-full h-auto relative z-0 rounded-lg transition-all duration-300 group-hover:scale-110 group-hover:rotate-6">
<div class="absolute h-full w-full bg-black/50 top-0 left-0"></div>
</div>
</div>Text and Link hover Effects
Use below example hover effects in tailwind css of links using tailwind transition properties and animation classes.
Hover over me
Hover over me
Hover over me
Hover over me
<div class="w-full relative flex justify-between flex-wrap gap-3">
<p class="text-lg m-6 group relative w-max">
<span>Hover over me</span>
<span class="absolute -bottom-1 left-0 w-0 transition-all h-0.5 bg-indigo-600 group-hover:w-full"></span>
</p>
<p class="text-lg m-6 group relative w-max">
<span>Hover over me</span>
<span class="absolute -bottom-1 right-0 w-0 transition-all h-0.5 bg-indigo-600 group-hover:w-full"></span>
</p>
<p class="text-lg m-6 group relative w-max">
<span>Hover over me</span>
<span class="absolute -bottom-1 left-1/2 w-0 transition-all h-0.5 bg-indigo-600 group-hover:w-3/6"></span>
<span class="absolute -bottom-1 right-1/2 w-0 transition-all h-0.5 bg-indigo-600 group-hover:w-3/6"></span>
</p>
<p class="text-lg m-6 group relative w-max">
<span class="px-1 relative z-10 group-hover:text-white">Hover over me</span>
<span class="absolute left-0 bottom-0 w-full h-0.5 transition-all bg-indigo-600 z-0 group-hover:h-full "></span>
</p>
</div>Button hover Effects
Following example shows button hover using tailwind css.
<div class="w-full relative flex justify-center flex-wrap gap-5">
<button class="relative border border-indigo-600 group py-1.5 px-2.5 text-indigo-600">
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-indigo-600 group-hover:w-full group-hover:transition-all"></span>Button Hover </button>
<button class="relative inline-block font-medium group py-1.5 px-2.5 ">
<span class="absolute inset-0 w-full h-full transition duration-400 ease-out transform translate-x-1 translate-y-1 bg-indigo-600 group-hover:-translate-x-0 group-hover:-translate-y-0"></span>
<span class="absolute inset-0 w-full h-full bg-white border border-indigo-600 group-hover:bg-indigo-50"></span>
<span class="relative text-indigo-600 ">Button Hover</span>
</button>
<button class="btn relative inline-flex items-center justify-start overflow-hidden font-medium transition-all bg-indigo-100 rounded hover:bg-white group py-1.5 px-2.5">
<span class="w-56 h-48 rounded bg-indigo-600 absolute bottom-0 left-0 translate-x-full ease-out duration-500 transition-all translate-y-full mb-9 ml-9 group-hover:ml-0 group-hover:mb-32 group-hover:translate-x-0"></span>
<span class="relative w-full text-left text-indigo-600 transition-colors duration-300 ease-in-out group-hover:text-white">Button Hover</span>
</button>
</div>