使覆蓋相同的寬度/大小與圖像

Question

我需要懸停覆蓋與圖像相同的寬度。所有具有疊加效果的圖像都是不同的大小，但使用相同的類。 我找到了類似問題的答案，但它們都包含我需要擁有css「絕對」和「相對」屬性的其他方法。我嘗試過，但它使懸停效果停止工作。 任何有關這個問題的幫助將非常感激。 謝謝，海倫

PS：只要你知道，我是相當新的編碼，我不是英語母語的人......

 <!-- 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; 
} 

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