Linking Different Parts of an Image

Hi everyone! I’m new to Webflow and am loving it so far! On my site I’m using a modified triforce (pictured below) and want to make each triangle a Link (pun intended, Zelda fans! :wink:) to different pages. So: 1 image, 3 triangles, 3 different links. How can I do this?

Thanks in advance for the help!


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

I’m not a Webflow pro but this might help.
I think you could do it in two ways. You can either make each triangle a separate image and line them up as you do on the picture above. Or you could put three link blocks above the image and line them up on each triangle.

Hope this helps :slight_smile:

Thanks for your help, Marcusf! I’m trying your suggestion of putting three link blocks above the image and lining them up on each triangle. However, I’m having a really difficult time with layout and position. I’ve tried relative and absolute, and adjusting the position coordinates to get the link block lined up exactly over one of the triangles. However, when I do this and go into preview mode and click on them, nothing happens - even though I set the link block settings correctly as far as where to go when clicked). Which layout and position should I use to enable the link blocks to work, as well as will keep all of my other elements in place without shifting everything around?

Sorry for the double post but I found the solution! I’ll post it here for others. I set the image as the background of a div block set to the same dimensions, and then chose the Grid layout for the div block, set up the grid to have 3 areas (just by combining the top 2 areas into one Area). From there it was easy to place Link Blocks inside/on top of each of the 3 grid areas of the div block. And it’s working perfectly! Thanks again for your help Marcusf!