How to add scale animation on hover using Tailwind CSS in React ?

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

In this article, we’ll see how to add scale animation on hover using tailwind CSS in a ReactJS app. The hover effect appears when a user positions the cursor over an element. In tailwind CSS, the scale utility class helps in getting the zoom effect over an element. 

Scale Animation Classes used in Tailwind CSS:

• Tailwind CSS Scale:This class is used to scale elements with transform on hover having values(y) i.e., 0, 50, 75, 100, 125, 150.
• Tailwind CSS Transform:This class is used to transform an element.
• Tailwind CSS Transition Property: This class is used for controlling transitions.
• Tailwind CSS Transition Duration:This class is used to control the duration of CSS transitions having values(y) ranging from 75 to 1000.

Step for Creating React Application and Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the React.js application, install the Tailwind CSS using the following command.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 4: Add Tailwind CSS directives into index.css file of the project.

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Configure template paths in tailwind.config.js file using the following command:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
}

Project Structure: It will look like the following.

Syntax: 

<div class="overflow-hidden">
    <img src="gfg.png" class="hover:scale-x transform transition duration-y" />
</div>

Example 1: Below example demonstrates the scaling of an <div> element on hover in React.js using Tailwind CSS. 

In the given example, we have developed a basic card component in which the user hovers over it, the card gets scaled to a size of 110.

Javascript

import React from "react";

function App() {
    return (
        <center>
              <div>
                <h1 class="text-green-600 text-3xl font-bold">
                    GeeksforGeeks
                  </h1>
                <h3 class="text-xl text-black">
                      Scale Animation on Hover using Tailwind CSS
                </h3>
              </div>
              <div>
                  <div class="p-4 md:w-1/4 sm:w-1/2 w-full">
                    <div class="border-2 border-green-600 cursor-pointer
                                py-6 rounded-lg transform
                                transition duration-500 hover:scale-110">
                          <h2 class="title-font font-medium text-3xl text-gray-900">
                            GeeksforGeeks
                          </h2>
                      <p class="text-xl">Premium</p>
                    </div>
                  </div>
              </div>
    </center>
  );
}

export default App;

Output:

Example 2: Below example demonstrates the scaling of an image on hover in React.js using Tailwind CSS. 

In the below example, we have added the scale animation on an image component on which when the user hovers over it, the image gets scaled to a size of 125 and the overflow of the image is hidden.

HTML

import React from "react";

function App() {
    return (
        <center>
            <div>
                <h1 class="text-green-600 text-3xl font-bold">
                    GeeksforGeeks
                </h1>
                <h3 class="text-xl text-black">
                    Scale Animation on Hover using Tailwind CSS
                </h3>
            </div>
            <div>
                <div className="bg-white overflow-hidden drop-shadow-md
                                w-96 h-72 rounded-md items-center justify-center">
                    <div className="w-full bg-cover overflow-hidden">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                             className="w-full h-56 transform
                                        transition duration-1000 hover:scale-125" />
                    </div>
                    <div class="flex mt-4 justify-between px-4">
                    <h3 className="font-bold text-xl">
                        GeeksforGeeks
                    </h3>
                    <a
                        href="https://geeksforgeeks.org"
                        class="items-center py-2
                               px-4 text-sm font-medium
                               text-center text-gray-900
                               bg-white rounded-lg border
                               border-green-500 hover:bg-green-500"
                    >
                        Visit
                    </a>
                    </div>
                </div>
            </div>
        </center>
      );
  }

export default App;

Output: