make overlay same width/size as image - html

Question

I need the hover overlay to be the same width as the image. All the images with that overlay effect are different sizes, but use the same classes.
I found answers to a similar problem, but they all include that I need to have the css “absolute” and “relative” properties the other way around. Which I tried, but it made the hover effect stop working.
Any help with this issue would be very much appreciated.
Thanks, Helene
P.S.:Just so you know, I’m fairly new to coding and I’m not an english native speaker…
<!-- HTML mark-up -->
<div class="container">
<a href="#img1">
<img src="resources/img/hgdgdg_TH1.jpg" class="thumbnail" id="linathi_1">
<div class="overlay">
<div class="caption"><i class="ion-ios-pricetag"> €150</i></div>
</div>
</a>
</div>
/* CSS OVERLAY ON HOVER */
.container {
position: relative;
width: 100% /*50%*/;
}
.thumbnail /* image */ {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(180, 81, 64, 0.85);
overflow: hidden;
width: 100%;
height: 0;
-webkit-transition: .5s ease;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.caption {
white-space: nowrap;
font-family: 'Assistant', 'Arial', sans-serif;
font-style: normal;
font-size: 130%;
color: #fff;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}

Answer 1

<div class="container">
<a href="#img1">
<img src="https://www.w3schools.com/css/img_fjords.jpg" class="thumbnail" id="linathi_1">
<div class="overlay">
<div class="caption"><i class="ion-ios-pricetag"> €150</i></div>
</div>
</a>
/* CSS OVERLAY ON HOVER */
.container {
position: relative;
width: 100%
}
.thumbnail /* image */ {
display: block;
width: 100%;
height: auto;
overflow:hidden;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(180, 81, 64, 0.85);
opacity:0.5;
visibility: hidden;
transition: all .5s ease;
transform: translateY(-100%);
}
.container:hover .overlay,
.container:hover .overlay .caption i {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.container:hover .overlay .caption i {
transition-delay: 300ms;
}
.caption {
font-family: 'Assistant', 'Arial', sans-serif;
font-style: normal;
font-size: 18px;
color: #fff;
position: absolute;
margin:auto;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.caption i {
opacity: 0;
visibility: hidden;
display: inline-block;
transform: translateY(-20px);
transition: all .5s ease;
}