How To Create A Zoom-In On Hover Interaction In Webflow

[@olewahlstrom3589]

Great tutorial! Just what I needed in terms of step-by-step. By learning the steps first, makes it easier to understand shortcuts later!

[@nicolestabile5158]

Hi! I'm new to webflow and am struggling to get the structure set up. Do you have any tips or a tutorial for that?

[@brianlove28]

So when it comes to structure, I love using the Relume Style Guide. This is the style guide I use for my projects. webflow.com/made-in-webflow/website/relume-library-styleguide In addition, Relume has a lot of great ready made components if your interested in checking it out as well. bit.ly/blrelume Now once I have this structure I use a system called Client First for naming my classes. There are a ton of great resources on KZbin regarding Client-FIrst kzbin.info/www/bejne/h5y7gJ1_q7Z5p9E

[@mikepapahotel]

Nice work Brian! Interactions are my Webflow weak link so it was good to watch your methodical and detailed tutorial - most of them move too quickly for me to fully grasp what's happening and why. Keep up the good work! 😊 👍

[@brianlove28]

Thank you so much, Michael! Really appreciate you taking the time to check out my video and leave a comment.

[@genevevecortezmabalhin4550]

Great tut! Thanks for sharing

[@ahmedqayyum]

You made my day. Thanks.

[@jobstoppers]

Hi! Are all 4 divs called feature-image? Or do they have other names? If I name the 4 divs the same, they can't have different background images, no?

[@brianlove28]

Great question. Yes, you are correct that if we name the 4 divs the same, they can't have different background images. I know it isn't shown in the video, but I gave the second, third, and fourth card a unique combo class (for example ".feature-image.is2" or ".feature-image.is3" If we give each card a separate combo class, we can then give each a different image.

[@anfisign]

hi, Brian. Thanks a lot for the tutorial. I have a quick question. I've made a similar card structure to what you've built (Images container -> Image wrapper -> Card with image). Now, when I add the animation the image grows beyond the image wrapper, making it grow so big that it visually overlaps the next image. So, I'm wondering what's the trick to making the image stay inside the wrapper (or within its size)? Any ideas? Thank you in advance.

[@brianlove28]

Hi Anfisa, Without seeing the read-only, one thing you can try is setting the Image wrapper or the image's parent element to overflow hidden.

[@anfisign]

@@brianlove28 I think that’s it! Thanks a lot. I indeed haven’t specified the overflow hidden. That’s something to always keep in mind. Thank you for replying