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>

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.