2 Ways to Zoom Image on Hover in TailwindCSS

The zoom effect on an image when hovering is quite popular nowadays. You can see this zooming effect on almost every website. In TailwindCSS, you can achieve a zoom effect on hover easily.

Method 1: Zoom Image on Hover in TailwindCSS

You can utilize the scale and transition class TailwindCSS to add a zoom effect on a stand-alone image. This is useful when you are displaying images in an image gallery or a single image in an article. The code snippet below scales the image when hovered to create a zooming effect. You can also check the working demo on the tailwind playground.

Method 2: Zoom Image on Hover in a Fixed Container

You often need to zoom images in cards that have a fixed container. You can utilize the scale class inside a fixed width and height container to add a zoom effect. The following example demonstrates how to zoom an image inside a card. You can check the working example online on the TailwindCSS playground.


You can utilize scale class in TailwindCSS to either zoom a single image for a gallery or blog post or you can have a zoom effect on a card image with a fixed container. Both ways, the zooming effect works perfectly with transition property.

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles