Hey! I am making a simple animated site but I can’t figure out a thing: I have a gif as a background and I want the user to be able to click parts of it so they work as links. I thought adding a Grid above the Gif would work, and it does, but I have no control when it comes to the link placement on different resolutions than mine. Any insight into what I should try?
Thanks!
Here is my public share link: LINK
(how to access public share link)
@Kron98 Stick the image in a div set to relative, set the image to relative and give it a low Z-Index, then drop some link blocks in the same div, set them to absolute with a Z-index higher than the image. Give them the width and height you need for the clickable areas and position using absolute. They’ll ‘float’ over the image. Anyhow, that’s what I have in my head, can’t seem to click on your share link.
Thank you so much for the help! Trying that method right now!
Sorry about the share link, but didn’t put it since the project is bound to an NDA.
Thanks!
Edit: It works! The links stay in their position, as intended! The problem is when I resize the window: the image resizes itself properly, but not the links :S
So instead of pixels try percentages ot vw and vh.
Thanks! With this, the divs definitely resize in both their width and height, but somehow still maintain the same position. I tried making them a child of a div block of the same width as the background with no luck whatsoever :S
What are you using for the absolute positioning? Have you tried percentages etc there are well so the position moves as the div gets smaller?
I think I followed your steps before, but with all the changes I am doing I am not sure I did it well :S
Here is a quick image of the Navigator: Screenshot - 04d68f7203e8eef3d399411902e8e9be - Gyazo
Plus how the positioning looks in the Link1: Screenshot - ddcf5090b4e74a13a6b438eeb7b94ab6 - Gyazo
So try using percentages on the absolute positioning. Let’s for example say you’ve got a div that’s 1000px wide and your link block is 100px in a from the left and 100px down. If you resize it’ll be in the wrong position as the div shrinks. Let’s say the now say 10% from the left and 10% down it’ll scale the positioning with the size of the div changing.
Also, for each link block try to position from the nearest side of the container div.
That really helped! It definitely works kind of okay if I resize the window diagonally. If I do it vertically or horizontally, it goes bonkers again.
Another method I was working on was making an HTML5 with built in links in Adobe Animate, so I could just insert that new HTML into webflow. Since Webflow doesnt allow local HTML’s, I tried uploading them to a CDN but somehow it doesnt work as well :S
Oops
I had to delete everything confidential, so it’s pretty basic 
@Kron98 So everything needs to be in the same div and have a height it can scale with. Like so: https://gif-link-test.webflow.io As the div gets smaller in terms of height and width the links scale down and their positions adjust accordingly. I wasn’t very accurate for their size but you can tweak that. Also, kill the share link, you left the assets in the asset library so the opening soon gif is visible. Clone my test here: https://webflow.com/website/gif-link-test
Oh my. THANK YOU so so much! I literally wasn’t able to think more about this. Thank you so much for sticking with me!! I really appreciate it. Hell, if you want me to pay you for this, please let me know.
No worries, all good.