Implementing Image Overlays in case of Multiple Images - html

Question

I tried to get an example from w3schools running, but in my case there are multiple images. The overlay is displayed for the entire window instead of the 1st image (I plan to do this for all images later).
Here is my code:
.flex-container {
display: flex;
}
.col1 {
position: relative;
display: block;
}
.img1-wrap {
display: block;
}
.image {
display: block;
/*width: 100%;*/
height: auto;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="col col-1">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image2">
</div>
<div class="col col-3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image4">
</div>
</div>

Answer 1

Add position:relative to .img1-wrap and give a try.
When you make a element positioned absolute, Make sure its parent
is positioned relative
CSS
.img1-wrap {
display: block;
position: relative;
}
Is this what you want to achive Working Fiddle
Hope this helps..

Answer 2

It seems you are not using positioning the right way. Use relative for each element block with the text container.
You should restructure your HTML & CSS in such way:
.flex-container {
position: relative;
display: flex;
}
.img1-wrap {
position: relative;
overflow: hidden;
width: 200px;
}
.image {
width: 100%;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Hope this helps and this is what you're trying to achieve.