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

【问题标题】：make overlay same width/size as image使覆盖与图像的宽度/大小相同
【发布时间】：2017-05-25 12:32:24
【问题描述】：

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

P.S.：你知道，我对编码还很陌生，而且我不是说英语的人……

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

【问题讨论】：

标签： html css hover overlay

【解决方案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;
}

【讨论】：