Complex hover reveal area help

Hey Webflow Community!

I’m trying to do a simple hover reveal on a floorpan of an apartment.
The idea is that when the mouse hovers over 1 of the 3 apartments, a green filter appears. However as the apartment shape is complex, I’m having trouble limiting the hover area to the actual apartment. I currently have 2 overlapping .pngs. I thought the transparency of the .png might have limited when I wanted the hover to work, but it appears whenever the mouse hovers over any part of the image (transparent or not).
Thanks for any help you guys have with this.


Here is my site Read-Only: https://preview.webflow.com/preview/monaresidence?utm_medium=preview_link&utm_source=dashboard&utm_content=monaresidence&preview=947eead86a92a3a3a07442407f9253d8&mode=preview

Hi there!

This can be achieved with custom code and SVG’s.

You would need to create the SVG’s for the masks and then create html embeds that will be over the full apartment plan, paste the relevant svg code into each relevant embed and then follow this tutorial to add interactivity to the each SVG element

1 Like

Nice. You were a bit faster than I. But I was wondering if it’s possible too. I made a quick example.
https://labmr.webflow.io/svg

Nice thanks guys! I’m worried the 3 .svg won’t fit neatly into each other. Like puzzle pieces. But I’m going to give it a try, thanks.

I would think you shouldn’t need three HTML embeds, only one svg with three separate groups. I’m an amateur though, so I’m not positive. The reveal could be accomplished within each group, so that it only triggers when you’re hovering over that exact portion.

Ahh, welcome to my constant struggle for the past 2 months :sweat_smile:

I accomplished the effect using a heavy number of interactions with overlayed images as you’d mentioned. Take a look at the finished effect:

www.holeinthewallatl.com/vip

Your site looks excellent by the way!

@kevin.garcia.design Have look here https://labmr.webflow.io/svg-puzzle

The import thing is: Create your 3 svg pixel perfect in e. g. illustrator and copy and paste them together in a code-editor (Visual Studio) to get the path. The path you have to embed via HTML-embed component in webflow
They fit together by default.

Hey Matthias!

I’ve accomplished a similar effect as the one found in your link above. However, could you explain how you created the hover interaction? Was it within the Embed element, and if so could you please show me how? Maybe you could provide a read-only link?

I’m trying to replace my current system: holeinthewallatl.com/vip with the SVG method as it’s a lot cleaner. But I need to assign a Webflow interaction to the hover as well as the click state for the SVG’s. I’d really appreciate any advice.

Thank you!