CSS/Bootstrap Place a set of buttons on top (and within) another div

Question

I want to place these buttons alongside the icon button on top of the three images above them. I have tried setting them to position: absolute; and and using the z-index but this results in the buttons not aligning on top of each respective image, and if I do manually position them, they are no longer aligned whenever I resize the window. I want to keep these buttons trapped within the div that the images are in, while still overlaying them. Is this possible?The image is shown below of what it currently looks like

here is the code:

<div class="imageSection">
<div class="container paddingContainer">
  <div class="row">
    <div class="col-4 borderEraser">
      <img class="imageResize" src="{% static 'webapp/images/srblogthumb.jpg' %}">
      <div class="info">
        <a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
        <a class="btn btn-dark alignRight" href="#">View Code</a>
        <a href="#">
          <img class="iconImage" id="info1" src="{% static 'webapp/images/infoIcon.png' %}">
        </a>
      </div>
    </div>
    <div class="col-4 borderEraser">
        <img class="imageResize" src="{% static 'webapp/images/digitaltwinthumb.jpg' %}">
        <div class="info">
          <a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
          <a class="btn btn-dark alignRight" href="#">View Code</a>
          <a href="#">
            <img class="iconImage" id="info2" src="{% static 'webapp/images/infoIcon.png' %}">
          </a>
        </div>
    </div>
    <div class="col-4 borderEraser">
      <img class="imageResize" src="{% static 'webapp/images/mariopicthumb.jpg' %}">
      <div class="info">
        <a class="btn btn-dark alignLeft" href="https://sebastianrichardsblog.herokuapp.com/home">View Project</a>
        <a class="btn btn-dark alignRight" href="#">View Code</a>
        <a href="#">
          <img class="iconImage" id="info3" src="{% static 'webapp/images/infoIcon.png' %}">
        </a>
      </div>
    </div>
  </div>

and the css:

body {
    background-image: url("images/background2.jpeg");
}

h1 {
    color:aliceblue;
}

.srlogoimage {
    width: 75%;
    height: 75%

}

.hidden {
    display: none;
}

.textCentered {
    text-align: center;
}

.imageResize {
    position: relative;
    width: 98%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-size: cover;
    border-radius: 10%;
    max-height: 100%;
    max-width: 100%;
    
    
}

.borderEraser {
    margin-left: 0px;
    margin-right: 0px;
    border-left: none;
    border-right: none;
    display: block;
    padding-left: 0px;
    padding-right: 0px;
}


.alignRight {
    float: right;
    justify-content: center;
}

.alignLeft {
    float: left;
    justify-content: center;
}

.alignBottom {
    text-align: center;
}



.imageSection {
    position: relative;
    z-index: 0;
}



.info {
    padding: 1%;
    z-index: 9;
}
.iconImage {
    max-height: 10%;
    max-width: 10%;
    border-radius: 50%;
    background-color: aliceblue;
    
   
    

}

.paddingContainer {
    border-color: blanchedalmond;
    border: 50%;
    padding-left: 9%;
    padding-right: 9%;
    
}

any help or pointers will be greatly appreciated, I've been stuck on this for a week now

Answer 1

If it's something like this you trying to achieve:

You can add

.borderEraser {
    position: relative;
}
.info {
    position:absolute;
    top: 50%; 
    left: 0; 
    right: 0; 
    transform: translate(0, 30%); // try different values
}

to your css-classes. To change positioning when images get small (on resize), you could maybe use media-queries and change position-style.

If you decide to use the images as backgrounds instead, you should use flexbox and align buttons accordingly.