adding overlay to grid images on hover - html

Question

I have an image gallery and would like to display text above it when hovering. I cannot set specific sizes to the image description because the grid resizes constantly. I know I could fix it with very specific media queries yet I don't want to do that. Is there a simple way for me to do it?
.figure-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
}
.description {
opacity: 0;
background: black;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.img-container {
overflow: hidden;
width: 100%;
height: 100%;
}
figure:hover .description {
opacity: .8;
}
.d-name {
color: white;
font-size: 1.2em;
font-weight: 600;
}
.d-item {
color: white;
font-size: 1.1;
}
<figure class="figure3">
<img class="figure-img" src="images/propg" alt="5St.">
<div class="description text-center">
<p class="d-name">Tower</p>
<p class="d-item">Pnsulation</p>
<p class="d-item">topping</p>
</div>
</figure>
<figure class="figure4">
<img class="figure-img" src="image" alt="nehandler">
<div class="description text-center">
<p class="d-name"> Tower</p>
<p class="d-item">nsulation</p>
<p class="d-item">topping</p>
</div>
</figure>
<figure class="figure5 ">
<div class="img-container">
<img class="figure-img" src="images/pr34th-St%20rendering.jpg" alt="4h St">
<figcaption class="description text-center">
<p class="d-name"> Tower</p>
<p class="d-item">PInsulation</p>
<p class="d-item"> Firestopping</p>
</figcaption>
</div>
</figure>