Hello Webflow Community! I’m working on a venue site, and I’m having trouble creating my elements in a way that scale and position properly as the browser size changes. I’m trying to use a top-down drone photo as a map, which upon hover of specific elements (ie. the barn, house, ceremony area), illuminate and serve as link-buttons to the specific pages. I’ve absolutely positioned the elements and used positioning to get the hover in the right spot. But as you can imagine, as soon as I make the window full-screen, or try to switch to mobile, the element is in a completely different spot.
How could I anchor/pin the outlines so that they remain in the correct spot in-relation to the map regardless of the window/platform? Any help would be greatly appreciated!
What you are trying to do is pretty difficult to pull off without some javascript that will refocus the image and outlines at various screen sizes.
If I were going to “fake” the effect, I would make sure that my outline image and background image were exactly the same size, and then I would stack the divs using absolute positioning relative to a parent div.
When designing the images, I would center the focal point so that the center of focus will remain in view as screen size adjusts. You can export them all as PNG’s, just make sure they all share a canvas size, so that they stack perfectly on top of each others footprint.
Then you can match position/styles on the two images, and they will resize the same way and maintain positioning relative to each other. Then you can adjust the position and shape of your hover or flyout elements based on device size to accommodate different screen sizes.
That being said, your reference pins, or flashing indicators will not always be in the right position (unless these share the same dimensions as your outline and background image as well). And even then you are likely to run into other positioning issues down the road. Even if you solve the positioning issues, you may run into visibility/clarity issues as you scale the image from desktop to mobile and try to keep it readable across the various devices. You could tackle that problem with conditional logic and different elements for different screen sizes, but that could get really tedious to maintain.
Sorry if I have confused you further. Let me know if you need me to get more specific or detailed about any of that.
P.s. Your images are huge. Try scaling those things down to under 400kb for web performance.
Thank you so much for your thoughtful response! I didn’t realize this effect was more difficult than a simple styling change. Thanks a lot for the enlightenment.
I’ve made the images all the same size as you’ve suggested. But my next problem is that since they are all the same size, I can’t hover over a specific object (barn, ceremony, house). Wherever I hover in the window, it just prioritizes the image on the top because it thinks I’m hovering over it. Since they are the same size, how do i make the outline appear when the mouse hovers over the specific building. Does that make sense?
I’ve updated the read only and published page so you can see what I’m talking about. Thanks again.
I think I get what you are saying. This is where you can create your floating “invisible divs” to trigger the hover effects like you were trying to do with your initial outline image because positioning does not have to be perfect. This way you can create various places to interact with the hover trigger, without hovering over the full screen image itself.
I have done something like before (Meet Cortex | Performance-Driven Revenue Analytics - hover over the graph) To do it I used a grid as my hero element, and set the background image to be my feature image, then nested my (invisible) hover triggers inside of the grid as grid blocks and align them as best as possible with generous overlaps. You can even increase the resolution of your grid to get as granular as you want, but this will get confusing as you transfer the design to various screen sizes. Which means this kind of setup is going to get janky fast, especially as you add more complexity to the image.
Ideally you would limit the image to 2, 3, or 4 hot spots so that you can realign them easily across various breakpoints. In my example above, I got away with using many more as the alignment was only across the horizontal axis and the pop-ups were fairly consistent in shape and design. Even then, we abandoned the design on mobile as it was impossible to get perfect, and there is no hover on touch devices.
Aha! You cracked the code! I’d written out a completely different response, but really wanted to make sure I’d tried as much as I can to find a solution before responding. And as you’d have it, I finally figured it out!
The grid solution worked great, however, I was having a problem after creating the interaction triggers for the outlines. The animations did not appear to be working, but then I realized that they were functional, just hidden because the grid background image was covering it. I tried moving the outlines in front, but then I could not select the grid. The solution was to remove the background image on the grid and add that separately as a div behind the other elements.
Please take a look now as I think it’s working pretty well. I’d like to know how to keep the image scaling so that it doesn’t cut off as it does currently when mobile windows are reached. But you’ve seriously helped me a ton. If this was reddit, I’d give you gold. Thank you so much!
I can see where that background image might have overlapped some of the other shapes. You can usually fix that by changing the z-index on a div or element to bring it up above the other image. This way you do not add unnecessary divs to your project.
To set a z-index in Webflow, just make sure your position selector is set to anything but “static” and then you will see a little z-index selector box.
Change the position element
Set the z-index
The higher the number, the higher that layer will show up in the visual plane. So you could make the background 1 and the top layers 2, and the layers would then sit over top of the image. Something to consider for future reference. Here is a link to learn more about z-index - Apply a z-index value | Webflow University
What I would do for mobile is adjust the setting on your images from cover to contain. This will make sure the whole image is visible on mobile.
The problem here is that you have a lot of areas where you have not set height and width parameters so there are places where the screen does not know how to align or space the elements. It will work in the short term, for a simple page like this, but you want to be sure you constrain your divs with min/max heights, and really think about how you use positioning styles so that you don’t create booby traps for yourself down the road.
Lastly, since there is no way to represent hover on mobile, I would think about some sort of visual cue on the site to let me know what I am looking at. It’s visually appealing on desktop, but a little underwhelming on mobile since I do not get the whole hover state change experience.
Thanks for the proverbial gold. Glad I was able to help.
