How can i make hover effect on image with caption - html

Question

so im having little bit of strugle making this work.
So basicly what i am trying to make is image with caption under it and when you hover over image it gets greenish color with transparency and a plus sign on it.
What ive tried so far is to make <div class=parent> and inside of <div class=parent> i would have <img> and another <div class="overlay">
HTML
<section class="gallery">
<div class="container">
<div class="row">
<div class="parent">
<img src="img/showcase.jpg">
<div class="overlay">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
</section>
CSS
.gallery .overlay {
background: rgba(0, 188, 156, 0);
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
} /* this div overlay will be greenish transparent color over an image when image is hovered */
.gallery .parent {
margin-top: 40px;
} /* this is just some spacing when images go one under another */
.gallery .parent:hover .overlay {
background: rgba(0, 188, 156, 0.8);
}
.gallery .parent:hover .fa-plus {
color: white;
}
.gallery .fa-plus {
position: absolute;
top: 50%;
left: 50%;
color: rgba(255, 255, 255, 0);
font-size: 1.75em;
}
so this works perfectly fine.
But when i put caption in my HTML.
<section class="gallery">
<div class="container">
<div class="row">
<div class="parent">
<img src="img/showcase.jpg">
<div class="overlay">
<i class="fas fa-plus"></i>
</div>
<div class="caption">
<h5>Lorem ipsum dolor.</h5>
<h6>lorem</h6>
</div>
</div>
</div>
<div class="overlay"> stretches all the way down
im running out of ideas how to make this possible especially because i need it to be responsive, images are changing widths and heights based on the resolution so i can put <div class="overlay> height on 80% or 90%
EG on medium devices.

Answer 1

Put the image inside its own container where you can add the overlay:
.img-container {
display:inline-block;
position:relative;
}
.img-container img {
display:block;
}
.overlay {
background: rgba(0, 188, 156, 0);
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.gallery .parent {
margin-top: 40px;
}
.gallery .img-container:hover .overlay {
background: rgba(0, 188, 156, 0.8);
}
.gallery .img-container:hover .fa-plus {
color: white;
}
.gallery .fa-plus {
position: absolute;
top: 50%;
left: 50%;
color: rgba(255, 255, 255, 0);
font-size: 1.75em;
}
<section class="gallery">
<div class="container">
<div class="row">
<div class="parent">
<div class="img-container">
<img src="https://lorempixel.com/400/200/ ">
<div class="overlay ">
<i class="fas fa-plus ">+</i>
</div>
</div>
<div class="caption ">
<h5>Lorem ipsum dolor.</h5>
<h6>lorem</h6>
</div>
</div>
</div>