Streaming live at 10am (PST)

Interactive hotspots on image

Hi Dave

Thanks so much for taking the time to help, I’m still struggling.
Please advise on how I can create a button on top of an image? I have one single image on top of which I want to create “hotspots” that show up when they are hovered over. Please assist, thanks!!

Here is my public share link: LINK
(how to access public share link)

It´s kind of hard to know what you mean without an example or public share link. Can you provide the public share link?

I guess a normal DIV with background image, containing buttons or link-DIV´s is the easiest option, presuming this is what you are looking for.

Sorry. Very new to this. Does this link help?

But yes, the DIV with a background image is what I’m looking for - I’m just struggling to assign the image the property of being a background image and positioning buttons on top of it.

I guess it´s about getting the buttons on the “compressor-like” image?

Exactly! I know the image is squashed right now, but I can fix that.

Well then, first things first.

You can see the image is inserted in webflow as an image (Note the image logo):

An image can only hold an uploaded image itself. Nothing else can be nested inside the image.

2 ways to perform what you want.

First is: Keep the image and set a relative or absolute position to the buttons. It´s a little cumbersome and you really need to know what you are doing else you are going to have some unwanted behavior.

Second is the best one if you ask me:

  • Instead of using the image, place a normal DIV, and set the image as background of that DIV
  • Delete the image
  • Drag the buttons in the newly created DIV
  • Use Flexbox for superior easy centering
  • Enjoy your buttons on top of image :wink:

I think this is what you wanted?

Awesome!! Thanks ever so much, you’re a lifesaver!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.