Html 使覆盖与图像的宽度/大小相同

我需要悬停覆盖的宽度与图像相同。所有具有覆盖效果的图像大小不同，但使用相同的类。 我找到了一个类似问题的答案，但它们都包括我需要css的“绝对”和“相对”属性。我试过了，但它让悬停效果停止了。 在此问题上的任何帮助都将不胜感激。 谢谢，海伦

附言：正如你们所知，我对编码相当陌生，而且我不是一个以英语为母语的人

     <!-- 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">&nbsp;&euro;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;
}

/*悬停上的CSS覆盖*/
.容器{
位置：相对位置；
宽度：100%/*50%*/；
}
.thumbnail/*图像*/{
显示：块；
宽度：100%；
高度：自动；
}
.覆盖{
位置：绝对位置；
底部：100%；
左：0；
右：0；
背景色：rgba（180,81,64,0.85）；
溢出：隐藏；
宽度：100%；
身高：0；
-webkit过渡：.5s轻松；
过渡：放松；
}
.container:悬停。覆盖{
底部：0；
身高：100%；
}
.标题{
空白：nowrap；
字体系列：“助手”，“Arial”，无衬线；
字体风格：普通；
字体大小：130%；
颜色：#fff；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
宽度：100%；
文本对齐：居中；
}

<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">&nbsp;&euro;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;
}