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>