Forum Discussion

cosima's avatar
cosima
New to the Community
22 hours ago

Help needed: Smooth "Inner-Zoom" Hover Effect for Card Design (Google-inspired UI)

Hi everyone, I’m currently designing a global e-learning module for a large company and I’m aiming for a very clean, minimalist, Google-inspired interface.

I have a row of five rounded cards and would like to achieve a specific micro-interaction: When a user hovers over a card, the image inside should smoothly but slightly zoom in, but the outer dimensions (the container) of the card must stay exactly the same to keep the grid stable. 

Basically the same effect that is found here on the Google Website: https://about.google/intl/de_ALL/

Perhaps there is an easy workaround, but for me always the whole picture is growing out of the borders. 

Thanks in advance for your help! 🙂

1 Reply

  • JHauglie's avatar
    JHauglie
    Community Member

    Have you tried using the Hover state for each image, and then working with the images to get the desired degree of "zoom" effect? It may not be as smooth as the example you provided but that would seem to be a place to start.