Images with absolute positions not working with overlay text

Question

I'm trying to place an overlay text when hovered over an image but it's not working since the image is already in position absolute, so I can't use relative positioning. I tried to wrap them in a div but the image disappears and shifts from original location. Here's my code and screenshots:

<div class="wrapper">
                <div class="content">
                    <div class="content-overlay"></div>
                    <img src="assets/img/Carrot-Mutabal.jpg" class="image-1 shadow-lg img-fluid">
                    <div class="content-details fadeIn-bottom">
                        <p class="content-text">This is a short description</p>
                    </div>
                </div>
                
                <img src="assets/img/Monk's-Mutabal.jpg" class="image-2 shadow-lg ">
                <img src="assets/img/Prawn-Crescents.jpg" class="image-3 shadow-lg ">
                <img src="assets/img/Noura's-Vine-Leaves.jpg" class="image-4 shadow-lg ">
            </div>
    .image-2{
    position: absolute;
    margin-top: 3%;
    left: 4%;
    width: 30%;
}
.image-3{
    position: absolute;
    margin-top: 10%;
    left: 30%;
    width: 20%;
}
.image-4{
    position: absolute;
    margin-top: 30%;
    right: 30%;
    width: 30%;
}
.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}
.image-1{
        position: absolute;
        margin-top: 2%;
        top: 0;
        right: 0;
        width: 35%;
    }
.content:hover .content-overlay{
  opacity: 1;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

How I display the images in absolute

Edit: As CBroe suggested positioning the wrapper instead of div worked.