Absolute Positioning for Image with Hover Link Areas

Hi all,

I am trying to create an image that has 4 rollover “Hot Spots” that reveal information when hovered or clicked on. I can create it fine in the web breakpoints using my main image, then 4 separate images on top of the main image placed with absolute positioning. But then maintaining the positioning for the multiple mobile sizes just isn’t working. Any ideas or advice on how to accomplish something like this?

Hey, @newby if I have understood your question correctly you are trying to do something similar to :point_right: this video. It has all the best practice for responsiveness watch the video and follows those tricks it might help you :peace_symbol:

1 Like

Thank you very much! This is exactly what I was looking for. I appreciate the assist!

So I have watched the T.Ricks video quite a few times, and while the interaction part of it is awesome and something I will use, I am still struggling with how to maintain the custom positions of the 4 or 5 click spots. What is the process or settings to place and maintain small images on top of a larger image, especially on different break points?

The mobile sizes are the worst because there are 5 or more possible sizes, and position settings only allow for a one spot fits all. (or actually one location setting fits 1 and none of the rest)