-1

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.stack.imgur.com/vWpAz.png

MY HTML SO FAR

<body>
    <div class="image-container">
        <img src="img/justelimage.png" alt="Nature" class="video" />

        <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!

J.Patate
  • 1
  • 1
  • 1
    Please read [ask] and [mcve] – Sfili_81 Feb 10 '22 at 15:43
  • I made some changes in my Title and based myself on another similar question, that seemd to include the same details as mine and did not receive any negative comment ( https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css ). could you tell me more about what is lacking in my question or wording ? – J.Patate Feb 10 '22 at 17:35

2 Answers2

0

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 class="image-container">
       <img src="img/justelimage.png" alt="Nature" class="video" />
       <div class="link-container">
         <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.

mrobbins
  • 47
  • 6
0

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.

I hope this helps.

.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 class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>

</div>

</body>
</html>
Naman
  • 284
  • 1
  • 3
  • 17