Animate cards with zoom-in effect on picture

tldr; Had fun adding a zoom-in effect on card on hover

Tailwind playground: https://play.tailwindcss.com/CtxpncROJ9

Challenge

1. Have the image "zoom-in" on hover
2. Have the wrapper scale down on hover to intensify the zooming in effect
3. (when adding text) Keep the text position in card to avoid too much movement

How I did it

It really all comes down to those classes: duration-300 ease-linear hover:scale-[98%] hover:[&>img]:scale-110

Here, we set:

1. transition duration with duration-300,
2. the transition timing function with ease-linear and,
3. the hover behavior with hover:scale-[98%] hover:[&>img]:scale-110

Note: [&>img] is an arbitrary value. It allowed me to target the child img from the container and apply the scaling up for the zoom effect.

Adding text to the card

One restriction here is, I didn't want to text to scale down with the whole card because too many things would be moving.

To tackle that:

1. I added a wrapper around img that would scale down when the card (main container) is hovered with the mouse,
2. the title is absolutely positioned relatively to the main container,
3. the arbitrary values slightly change as now, we introduced an extra layer: hover:[&>div]:scale-[98%] hover:[&>div>img]:scale-110

Without text, we could target img directly but now, we want the scale down to be applied on the image wrapper, thus [&>div], and the scale up on the image inside which results in [&>div>img]

That's it! Thank you for reading and let me know in comments if it could be improved 👋