Why is overlay unresponsive? - html

Question

So i have a container/div in which i have six photos in it. In every photo i want to have an overlay when i hover over it. But the overlay covers the entire div and not just the photo dimensions. Maybe the problem is that i have class?
Wouldn't it be bad to have six css for every separate photo?
Here is the html:
<div id="info-pics">
<div id="info-pics-container">
<div class="info-pic-top">
<img src="service-1.jpg" alt="service-1" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Ύστερα από συνεννόηση με εσάς αναζητούμε τις πιο προσιτές και κατάλληλες δυνατότητες και
ταιριαστά σχέδια ώστε να πετύχουμε ένα όμορφο αποτέλεσμα.
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-2.jpg" alt="service-2" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-3.jpg" alt="service-3" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-4.jpg" alt="service-4" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-5.jpg" alt="service-5" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
<div class="info-pic-top">
<img src="service-6.jpg" alt="service-6" style="width:100%;height:100%;">
<div class="overlay">
<div class="overlay-text">Hello World
</div>
</div>
</div>
</div>
</div>
Here is the CSS:
#info-pics {
position:relative;
height:800px;
}
#info-pics-container {
background-color:grey;
position:absolute;
width:75vw;
height:30vw;
left:13%;
top:15%;
}
/* Container needed to position the overlay. Adjust the width as needed */
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
}
/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* When you mouse over the container, the overlay text will "zoom" in display */
.info-pic-top:hover .overlay {
transform: scale(1);
}
/* Some text inside the overlay, which is positioned in the middle vertically and horizontally */
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Answer 1

Just add position:relative
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
position:relative;
}

Answer 2

You missed to add position: relative to the selector info-pic-top. Try this code.
.info-pic-top {
float: left;
width: 33.33%;
height:50%;
padding: 5px;
position: relative;
}