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.
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
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.
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.
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.