html - 填充不适用于叠加层

Question

我正在用图像创建一个 div 并将叠加层放在顶部。当您将鼠标悬停在图像上时，会出现叠加层，但不会采用填充

  <div class="col-lg-6 text-center full-width">
      <div class="overlay">
        <p class="overlay-price-product">
          $9.00
        </p>
        <p class="color-white">
          MENS,T-SHIRT
        </p>
        <p>
          <a href="#">
            <button type="button" class="btn btn-default-buy">
              add to cart
            </button>
          </a>
        </p>
      </div>
      <img src="img/men_shirt_1.jpg" class="spaces">
    </div>

我的 CSS

.full-width{
padding-right: 0px !important;
padding-left: 0px !important;
background-color: #F6F6F6;
}

现在的问题是它为图像类采用填充，但不采用覆盖类填充

.overlay{
opacity: 0;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position: absolute;
padding: 20px;
}

.spaces{
padding:20px;
}

我不想让我的叠加层成为图像的确切大小有什么建议吗？或者有什么有效的方法吗？

Answer 1

您可以使用下面的代码:这里是 Live Demo

<div class="container">
     <img src="http://hdwallpick.com/wp-content/uploads/2015/02/sunshine-on-green-nature.jpg" width="200"/>
     <div class="overlay">
         <p class="overlay-price-product"> $9.00 </p>
         <p class="color-white"> MENS,T-SHIRT  </p>
         <p><button type="button">add to cart</button></p>     
     </div> 
</div>


.container{
    width:200px;
    height:200px;
    background:green;
    position:relative;
}
.container img{
    width:100%;
    height:100%;
}
.overlay{
    width:100%;
    height:100%;
    background:red;
    opacity:0;
    position:absolute;
    text-align:center;
    box-sizing:border-box;
    padding:20px;
    top:0;
    transition:all .5s;
    transform:scale(.9, .9);
}
.overlay:hover{
    opacity:1;
    transform:scale(1, 1)
}