How to add scale animation on hover using Tailwind CSS in React ?
Last Updated :
25 Jul, 2024
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=
"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;
Steps to run the application:
npm start
Output: This output will be visible on http://localhost:3000/
Similar Reads
How to Add Dark Mode in ReactJS using Tailwind CSS ?
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 direc
3 min read
How to style a href links in React using Tailwind CSS ?
In this article, we will learn how we can style a href link in Reactjs. Since we use Tailwind CSS, Tailwind CSS describes itself as the first applicable CSS framework. Rather than focusing on the performance of a style object, Tailwind focuses on how it should be displayed. This makes it easier for
2 min read
How to Change Image on Hover using Tailwind CSS?
One common effect is changing an image when the user hovers over it. We use Tailwind CSS, a utility-first CSS framework, to accomplish this without any additional JavaScript logic for the hover effect. By utilizing Tailwind's built-in classes we can create smooth transitions between two images where
2 min read
How to add a style on a condition in Tailwind CSS ?
In this article, we will see how to integrate conditional styling into our web projects using Tailwind CSS. There are various Tailwind CSS classes are available, although, it usually involves dynamically adding or removing classes using JavaScript. There are different approaches to implementing the
3 min read
How to make a CTA Animation with Tailwind CSS ?
To enhance the engagement level of your website's Call-to-Action (CTA) elements we use Tailwind CSS utility classes. By directly customizing transition effects with Tailwind CSS, you can effortlessly introduce captivating animation effects to your CTAs, improving user interaction and overall user ex
2 min read
How to use Ant Design with Tailwind CSS in a React Project ?
The integration of Ant Design and Tailwind CSS in a React project presents challenges due to their differing styling conventions. Ant Design offers a feature-rich component library with its own class names, while Tailwind CSS provides a utility-first framework for custom designs. Combining both libr
2 min read
How to make Animated Click Effect using Tailwind CSS & JavaScript ?
It refers to the technique of implementing animations that respond to user clicks, utilizing the Tailwind CSS for styling and layout, and JavaScript for adding dynamic behavior to the elements. This enhances user engagement and improves the overall user experience of the websites. Table of Content U
2 min read
Create Order Summaries using React and Tailwind CSS
In real-time eCommerce applications, it's essential to provide users with clear and engaging feedback when they perform key actions like confirming or canceling an order. This project demonstrates creating a dynamic Order Summary component using React Tailwind CSS and React Icons. The order summary
5 min read
Create Select Menus UI using React and Tailwind CSS
We will build a Select Menu UI using React and Tailwind CSS. Select menus are dropdowns that allow users to choose one option from a predefined list. We'll style the dropdown using Tailwind CSS for a modern, clean look and integrate React Icons to improve user experience. PrerequisitesReact.jsTailwi
5 min read
How to Ceate Swipe-able Button in Tailwind CSS and React?
Creating swipe-enabled buttons in React applications can greatly improve user experience, especially on mobile devices, these buttons are typically used for actions like deleting, sharing, and liking items, in this article we'll show you how to create a swipe-enabled button using Tailwind CSS for st
3 min read