When you are designing a website, you surely want to add some interactivity in elements. TailwindCSS, you can utilize hover modifier with any element you want. This can make your designs look beautiful and attractive.
Using Hover Modifier with TailwindCSS
You can use hover modifier with almost any element you want. With the help of hover you can change the background of a button, scale or change the width of div elements, create hover dropdown menus, and many more. The syntax to use the hover modifier in TailwindCSS is hover:class. Here are some simple examples of using hover in TailwindCSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="flex justify-center items-center space-y-10 flex-col h-screen"> <!-- hover on button --> <button class="bg-blue-500 px-5 py-2.5 text-center rounded-lg text-white hover:bg-blue-700">Hover me </button> <!-- hover on div --> <div class="w-80 h-20 bg-green-200 hover:scale-125"></div> <!-- hover on image --> <img src="https://placekitten.com/300" class="rounded-md opacity-80 hover:opacity-100 hover:scale-105"> </div> |
You can check the working example on tailwindplay.
Using Hover with Transition in TailwindCSS
You can see in the above example, the div elements get bigger immediately. Same as that, the image opacity changes quickly. Now, let’s add some transitions to the button, div element, and image. Applying transition in TailwindCSS is as easy as adding hover modifier, you just need to add transition class and the duration class to specify the time. The following example adds transition and duration to all the elements in the example. Also, check the working example on the tailwind playground.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="flex justify-center items-center space-y-10 flex-col h-screen"> <!-- hover on button --> <button class="bg-blue-500 px-5 py-2.5 text-center rounded-lg text-white hover:bg-blue-700 transition duration-300 ">Hover me </button> <!-- hover on div --> <div class="w-80 h-20 bg-green-200 hover:scale-125 transition duration-500 "></div> <!-- hover on image --> <img src="https://placekitten.com/300" class="rounded-md opacity-80 hover:opacity-100 hover:scale-105 transition duration-500 cursor-pointer "> </div> |
Using Hover with Group in TailwindCSS
You can also use hover modifier with group modifier to achieve whatever you want, the following example uses hover modifier with group to design a simple tooltip.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="mx-auto flex h-screen w-full items-center justify-center bg-gray-200 py-20"> <div class="group relative cursor-pointer py-2"> <span class="absolute invisible bottom-7 group-hover:visible bg-gray-500 text-white px-2 py-0.5 text-sm rounded-md"> This is tooltip </span> <span class="underline hover:cursor-pointer">hover to see a tooltip </span> </div> </div> |
You can check the working demo to see how hover modifier works with group modifier.
Conclusion
You can use hover modifier with almost anything you want with TailwindCSS. The general syntax of using hover in TailwindCSS is hover-[property]. You can get the benefit of group modifier with hover modifer to design different components like tooltip.