How to add scale animation on hover using Tailwind CSS in React ?
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
- 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.
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" > w3wiki </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" > w3wiki </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" > w3wiki </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.w3wiki.net/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" > w3wiki </h3> <a href= "https://w3wiki.net" 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/
Contact Us