Image Hover Effect

What’s the best method to create this effect on a card? >
On hover, image zooms in/out (example here)

I was able to recreate this effect by setting the background image on a div element and simply changing the image dimensions on hover. However, you would have to have a style for each card (div) if you wanted 6 of them on the page, right?

Is there another/better way to do this?


Hello @spoulos

Here is a project where I try to post some of the solutions that people asks on the forum, check the page> “Zoom on hover” and see how I built it.

To avoid set the specific effect to every card use a general class to set the interaction and combo classes to change the image on each div that you want to behave like that.

Let me know if that helps you.



This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.