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

Last updated on May 5, 2022 Pennywise Loading... Post a comment

The easiest and quickest way to create zoom effects on hover in Tailwind CSS is to use the scale utilities and transition timing utilities.

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>KindaCode.com</title>
</head>

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

</html>

Output:

Note: If you’re using Safari, this demo video might not work nicely or not start at all. Please use Chrome, Edge, Firefox, or another web browser instead.

Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like