Uneven interactive shapes


Have anybody did something like this? Any hints are much appreciated!

The problem is how to make a uneven shape active on hover only within it’s borders on top of a jpg image exactly in line with it but not just a rectangular div where it will be fully active (shows ‘pointer’ cursor) outside of the borders of the image.

If you look at the link above - and hover on one of the appartments it shows a shape. I could only do that with a rectangular div or a transparent .png shape, or is it a number of divs combined as a single shape? Or is it some outside of webflow solution that can be inserted?

A bunch of question with no answers.

I believe there’s a way to do that in WF. Because everything is possible with WF )

UPD - hosting seems to be suspended for some reasons - so here’s a screenshot

UPD: The link above works now

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Your link doesn’t work. Do you have a screenshot?

Oops, sorry. It worked last night… some hosting issues.

Here’s a screenshot. White shape appears on hover over it within the lines. Outside of the lines the shape won’t appear

You’d have to do this with images by setting the background image set to the outer div to a specific size and the other images inside it. Set the positioning on the BG div to relative and everything inside it to absolute so you can move them to where they need to be. Then make a hover interaction so that they go from 0-100% opacity.

Ok, this way the rectangular picture will be active on hover, even if it’s beyond the contour of the shape, say at some missing corner. Like I showed at the picture above. The blue line is where it’s just inactive. It is only active within the boundary black line. Or am I missing something in your reply?

Oh yeah, I didn’t think of odd shapes. I’m honestly not sure how you’d do that in Webflow. Probably would need a crap ton of custom code.

Thank you. Anyway, I stayed with pngs and basically the way you described, and this was obvious except for the trick with hover exactly on shape. Works good enough for my project. But I am still wondering how that was done and wether there’s a way to do the same purely (or almost purely) in webflow.

They did it with svg polygons. https://www.w3schools.com/graphics/svg_polygon.asp

1 Like

I guess this is what we need next in webflow. That would be awesome to do that coded stuff just like in sort of built-in vector editor

I feel like this exists elsewhere. There has to be a vector editor that lets you output a svg polygon code.

1 Like