tldr; Had fun adding a zoom-in effect on card on hover
Tailwind playground: https://play.tailwindcss.com/CtxpncROJ9
Challenge
- Have the image "zoom-in" on hover
- Have the wrapper scale down on hover to intensify the zooming in effect
- (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:
- transition duration with
duration-300
, - the transition timing function with
ease-linear
and, - 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:
- I added a wrapper around
img
that would scale down when the card (main container) is hovered with the mouse, - the title is absolutely positioned relatively to the main container,
- 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 👋
Top comments (0)