Image grow on hover within collection grid

Hello everyone.
I’ve been beavering away creating a simple layout for some cards - I want a subtle zoom on the images when the user hovers over.

Within the designer, the cards are all set up and on hover the image zooms. However when I go into preview there is no hover interaction and I’m not sure why or how to solve this.
I expect it’s something really simple. I’m fairly new to webflow and I’m enjoying learning through trial and error but this has got me stumped.

Here’s my preview link. Any ideas or thoughts would be really great.

https://preview.webflow.com/preview/buy-tauranga?utm_medium=preview_link&utm_source=designer&utm_content=buy-tauranga&preview=1944046168cd91982785236c5cb816de&pageId=5ec1f590996d18195417ef2c&mode=preview

Alex

The hover is set on an image that is covered by the div containing the details.

The hover event is catched by the details div, hence not affecting the image underneath.

You could se the zoom on hover on the item itself but then the text would also zoom.

Solution: add CSS code to remove the details container from being taken into account for pointer-events, rendering it click-through and letting the hover event happen on elements undertneath.

Drag an Embed component anywhere in the page and paste this code:

<style>
.business-details-container {pointer-events: none;}
</style>
2 Likes

or use interaction trigger
look video

3 Likes

@vincent Thank you so much for explaining why it wasn’t working and of course giving me the solution. I think the understanding of why is equally as useful to the how. So thanks so much.

@guoshuzhang thank you also for your suggestion. As soon as I saw the video - I thought that’s so obvious. I appreciate you taking the time to create a video and show me. Thank you!

Alex

Of course! Better, simpler… I don’t know why I wanted to fix the existing instead of adjusting it :slight_smile:

Use @guoshuzhang way, it’s better!

1 Like