Hi Tim, I’ve created few floor plans that light up when hovered in the past.
I will try to simply describe to you how I’ve achieved the result you’re trying to create without having the need of creating the animation for each hover.
First I take base image of the floor plan, let’s say it’s dimensions are 800x400, then i create the cutouts of each room, so if a floor has 6 rooms, i create 6 cutouts, I make sure to create a rectangle that is 800x400 and position each of the cutouts on top of the base floorplan img, while making sure that the cutouts are correctly positioned on their respective places. Now I grab the rectangle that I’ve created the one with the same size as the floorplan img, I select one cutout with the rectangle and group those two elements, I do it 5 more times since I’ve got 6 of the cutouts. What you need to be masking sure of is that the rectangle is actually a rectangle and the cutout is a path. That way we can later set the pointer-events on the element and make it so that the hover animation happens only when hovered on the cutout and not the rectangle. When exporting the images, you have to choose the file type of SVG, cuz it preserves the types of the elements withing the img like paths, texts and rectangles. Also make sure that the cutouts are colored, we’ll create and animation that will be related to opacity of the SVG images you’re creating, also don’t forget to make the rectangle without color, so that it doesnt block the floorplan under.
Now, Idk if you have more of these plans in the CMS or not, but let’s say you only have one of these plans, you don’t need to use CMS, but the CMS variant also works btw.
Now in webflow, you have to create an element that will have the img of floor plan within it, set it to contain so it doesn’t get cut off and make it relative, put another div in it, this div will be absolutely positioned and span over the full width and height of its parent. Within this div you’ll create a link block that will be 100% width and height, give it a class name, add a an img into this div, this img within the link block will also be 100% width height. Now you create the animation simply on the link block class, the animation will affect the image inside the block (it’s child), it will be opacity 0 and when hovering op will become 100%, make sure to create the hover out anim. too.
Now add the images into the links, and then make sure you put this into an embed on the site:
.PUT-CLASS-NAME-OF-THE-LINK-BLOCK {pointer-events: none;}
svg path {pointer-events: auto;}
Don’t forget to put the right class name into the embed.
Since I wrote this in a rush it might be a bit hard to understand, so feel free to ask anything. Also the hover works on the floorplan interaction, I reckon you might also want it to be lighten up when hovering a text in a list maybe? I have a solution for that too, but it’s a bit finicky so I don’t want to get into now. With that lemme know if there’s a need for that feature.
