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)
Scale on Hover
Shadow Effect on Hover (Card Shadow)

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 Fixed NavBar

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

Thank You!

What kind of Experience do you want to share?