Tailwind CSS Hover Effects

Last Updated : 03 Sep, 2024

A hover effect is a visual change that occurs when a user moves their mouse pointer over an element on a webpage. We can achieve a hover effect by Tailwind CSS built-in prefix modifier called "hover: ".

These are the following ways to use hover:

Table of Content

Simple Hover Effect (Background color change)

First, create a basic HTML structure.
Then include the Tailwind CSS CDN link in the <head> section to apply Tailwind CSS classes.
Inside the <body>, add a button element and apply Tailwind classes for styling (e.g., bg-blue-500, text-white, py-2, px-4, rounded).
For the hover effect use the "hover:bg-blue-700" class to change the background color on hover.

Example: This example shows the implementation of above explained approach

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content=           "width=device-width, initial-scale=1.0">     <title>Simple Hover Effect</title>     <script src="https://cdn.tailwindcss.com"></script> </head>  <body class="flex flex-col items-center              justify-center h-screen bg-gray-100">     <h1 class="text-2xl font-bold mb-6 text-green-600">       Simple Hover Effect     </h1>     <button class="bg-blue-500 text-white font-bold                     py-2 px-4 rounded hover:bg-blue-700                    hover:text-gray-200">                 Hover me     </button> </body>  </html>

Output:

Scale on Hover

First, create a basic HTML structure for your need.
Then include the Tailwind CSS CDN link in the <head> section to apply Tailwind CSS classes.
And inside the <body>, add a button element and apply Tailwind classes for styling (e.g., bg-blue-500, text-white, py-2, px-4, rounded).
Use the "transform" class to allow transformations, and use "hover:scale-105" for scaling the button on hover. Include transition, duration-300, and ease-in-out for smooth animation.

Example: This example shows the implementation of above explain approach

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content=           "width=device-width, initial-scale=1.0">     <title>Scale on Hover</title>     <script src="https://cdn.tailwindcss.com"></script> </head>  <body class="flex flex-col items-center              justify-center h-screen bg-gray-100">     <h1 class="text-2xl font-bold mb-6                 text-green-600">       Scale on Hover Effect     </h1>     <button         class="bg-green-500 text-white font-bold                py-2 px-4 rounded transform hover:scale-105                transition duration-300 ease-in-out">         Hover me     </button> </body>  </html>

Output:

First, create a basic HTML structure for your need.
Then include the Tailwind CSS CDN link in the <head> section to apply Tailwind CSS classes.
And inside the <body>, create a card using a div with the "max-w-sm", "rounded", "overflow-hidden", and "shadow-lg classes". Also add an image and text content inside the card for attract user attention.
Then use the "hover:shadow-2xl" class to increase the shadow intensity on hover.

Example: This example shows the implementation of above explain approach

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport" content=           "width=device-width, initial-scale=1.0">     <title>Shadow Effect on Hover</title>     <script src= "https://cdn.tailwindcss.com"></script> </head>  <body class="flex flex-col items-center justify-center              h-screen bg-gray-100">     <h1 class="text-2xl font-bold mb-6                text-green-600">       Hover Shadow Effect on Card     </h1>     <div class="max-w-sm rounded overflow-hidden                  shadow-lg hover:shadow-2xl transition                 duration-300 ease-in-out">         <img class="w-full"             src= "https://media.geeksforgeeks.org/wp-content/uploads/20230602174859/OpenAI-Python-Tutorial-.webp"             alt="Sample Image">         <div class="px-6 py-4">             <div class="font-bold text-xl mb-2">               Card Title             </div>             <p class="text-green-600 text-base">                 This is a sample card with hover shadow effect.                 Hover over the card to see the effect.             </p>         </div>     </div> </body>  </html>

Output:

Tailwind CSS Flex Grow

skaftafh

Improve

Article Tags :

Tailwind CSS Hover Effects

Simple Hover Effect (Background color change)

Scale on Hover

Shadow Effect on Hover (Card Shadow)

Similar Reads