Forum Discussion
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! 🙂
2 Replies
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.
It is much easier to replicate this effect with JavaScript. In the example below, I have high-quality photos embedded into shapes so I can choose which part of the photo will be shown inside the shape. Then I apply a JavaScript trigger that executes on mouseenter and mouseleave events to initiate a GSAP zoom-in and zoom-out effect. The values can be adjusted to zoom in more, or to make the animation last longer or shorter. Let me know if you’re interested in this solution and I can upload my Story file example for you.
