Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

Prerequisites

Approach to Add Scale Animation

To add scale animation on hover using tailwind CSS in React we will use the Scale and animation classes provided by Tailwind CSS which are as follows:

Scale Animation Classes used in Tailwind CSS

Syntax: 

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

Steps to Create React Application:

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 i -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.

 

Dependencies list after installing packages:

{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.17.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.3"
}
}

Example 1: Below example demonstrates the scaling of an <div> element on hover in React.js using Tailwind CSS. 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;


Steps to run the application:

npm start

Output: This output will be visible on http://localhost:3000/

Example 2: Below example demonstrates the scaling of an image on hover in React.js using Tailwind CSS. 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.

Javascript




// Filename - App.js
 
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=
                             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;


Steps to run the application:

npm start

Output: This output will be visible on http://localhost:3000/



Last Updated : 25 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads