How to Zoom on Hover with Tailwind CSS (the easiest approach)

Updated: December 15, 2023 By: Khue Post a comment

The easiest and quickest way to create zoom effects on hover in Tailwind CSS is to use the scale utilities (scale-*) and transition timing utilities (ease-in, ease-out, ease-in-out).

The strategy here is to add a small scale in a normal state and use a larger scale on hover:

<img class="scale-50 hover:scale-75" src="" />

In addition, we use transition utilities to make the transition smooth:

<img class="scale-50 hover:scale-75 ease-in duration-500" src="" />

Full example:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Sling Academy</title>
</head>

<body>
    <div>
        <img class="scale-50 hover:scale-75 ease-in duration-500"
            src="https://www.slingacademy.com/wp-content/uploads/2022/10/lovely-dog.jpeg" />
    </div>
</body>

</html>

Output:

That’s it. Happy coding & have a nice day!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments