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.
|
1 2 3 4 5 6 7 8 9 |
<div class="flex h-screen bg-gray-200 items-center space-y-4 flex-col justify-center"> <img src="https://placekitten.com/300" class="hover:scale-125 transition duration-500 cursor-pointer" > </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="flex h-screen bg-gray-200 items-center space-y-4 flex-col justify-center"> <div class="max-w-[400px] bg-blue-500 overflow-hidden"> <div class="max-w-[300px] max-h-[300px] overflow-hidden"> <img src="https://placekitten.com/300" class="hover:scale-110 transition duration-500 cursor-pointer object-cover" > </div> <h2 class="px-4 py-3 text-center text-white"> This is a cute cate </2> </div> </div> |
Conclusion
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.