Open In App

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

Last Updated : 25 Oct, 2023
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/



Similar Reads

Underline Hover Animation Effect using Tailwind CSS
The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpler words it created underline animation whenever w
3 min read
How to display text on hover over image using Tailwind CSS in React.js ?
In this article, we'll see how the text appears on hover over an image using tailwind CSS in a ReactJS app. With the help of Tailwind CSS utility classes, we can display the text or image or anything after hovering over an element in Reactjs. Prerequisites:NPM &amp; Node.jsReact JSTailwindCSSApproach:To display text hover over the image using Tailw
4 min read
Primer CSS Scale in Animation
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
2 min read
How to create button hover animation effect using CSS ?
Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button's background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::selection pseudo-element is used to change the color
3 min read
How to Create Ghost Text Animation on Hover using HTML and CSS?
Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS. HTML Code: In this section we have a ul tag which consists of some li tags displaying some text. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8
2 min read
Design a Carousel Column Expansion Animation Effect on Hover using CSS
In this article, we will see how to create the Carousel column expansion animation on a hover using CSS. Carousel Column expansion animation is a kind of reveal animation in the modern web design paradigm. To accomplish this task, we will create 3 columns of specific width and height, and on mouse hover, the animation is as such that the column on
3 min read
Split Skewed Button Hover Animation using CSS
Split Skewed Button Hover Animation effect can be created using the before and after pseudo-classes in CSS. On hovering change skewness and swap the positions of before and after pseudo-class. Steps: Create an HTML file named index.html.Create a div element for the button.Add styles to the button.On both the before and after pseudo-class of the but
2 min read
Tiling Perspective List Grid Hover Animation using CSS
Tiling Perspective List Grid Hover Animation can be created by using the nth-child CSS property and a display grid. Each column element styles and hover effects are different and this effect gives a nice perspective look . Approach: Create an HTML file named index.html.Create a ul list element in HTML.Create some li list elements inside the ul crea
3 min read
Tailwind CSS Scale
This class accepts lots of value in tailwind CSS in which all the functional properties are covered in class form. This class is used to resize the element in the 2D plane. It scales the elements in horizontal and vertical directions. In CSS, we can do that by using the CSS scale() function. Scale classes: scale-0|50|75|90|95|100|105|110|125|150: T
1 min read
How to change the width on hover using Tailwind CSS ?
In this article, we will change the width on hover using Tailwind. There is no inbuilt method in Tailwind, so you have to customize the tailwind.config.js file. Let's discuss the whole process further in this article. By default, tailwind CSS only generates responsive variants for width utilities. To modify width on hover, you need to modify tailwi
3 min read