How can I make overlay buttons that always stay over the same part of the picture that is under them-CodePudding

I have an interesting issue or objective here. I have an image that is a yellow rectangle with 3 red rectangles in it. I'd like to add clickable buttons as an overlay on top of the picture, right over the red rectangles.

Thing is, I would like those buttons to always be exactly over each red rectangles, same size/position, no matter the aspect ratio of the pciture, the screen resolution of the user, or the zoom percentage of his browser (as if the buttons were part of the image)

As an example, I've included a picture where the yellow rectangles and the red rectangles are part of the same image, and the dotted green line would be the overlay buttons or their respective divs.

[Not enough reputation for picture, but here] : https://i.imgur.com/ms4xmMZ.png

MY HTML SO FAR

<body>
    <div >
        <img src="img/justelimage.png" alt="Nature"  />

        <a href=“#”></a>

    </div>
</body>

MY CSS SO FAR WORKS BUT THERE SHOULD BE A BETTER WAY ? (works when I resize window, and change browser's zoom percentage, but what if we change the aspect ratio?)


.image-container {
    display: inline-block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 80vw;
    height: auto;
    z-index:0;

}

.video {
    position: absolute;
    width: 100%;
    height: auto;
    z-index:1;
  
}

.image-container a{
    position: absolute;
    margin-top:4.5%;
    
    margin-left: 57%;
    width:28.3vw; 
    height: 7vw;
    color:white;
    border: 0.25vw solid green;
    z-index: 999;

}

}

Any idea how I could manage to get this in a more logical way?

Any suggestions would be gladly appreciated. Thanks!

CodePudding user response：

I'd wrap the anchor in a div to center it. That way you could style anchor separately with px while maintaining its position relative to the img.

    <body>
      <div >
       <img src="img/justelimage.png" alt="Nature"  />
       <div >
         <a href=“#”></a>
       </div>
      </div>
    </body>

    .link-container {
       position: absolute;
       top: 50%;
       left: 50%;
    }

If you also style the .image-container with a background color and opacity you can toggle those values on :hover.

CodePudding user response：

The best way to keep buttons in place with respective to an image will be to have the container as

position: relative;

and buttons inside the div as

position: absolute;

and placed top and left with px or any unit that doesn't change with size.

But one major thing you can do is have your image as the background of image-container. That way buttons always stay on top of the image and u can restrict resizing of the container to make the buttons stay in position better.

.image-container {
position: relative;
  background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
  background-size: contain;
  background-position: center;
  width: 600px;
  height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
    top:10px;
    left:300px;
}
.two{
    top:100px;
    left:100px;
}
.three{
    top:50px;
    left:200px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div >
<button href="#" ></button>
<button href="#" ></button>
<button href="#" ></button>

</div>

</body>
</html>