DEV Community

Cover image for Animate cards with zoom-in effect on picture
John Cheng
John Cheng

Posted on

1

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 👋

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay