颜色叠加图像使用文本的样式效果

即时尝试为我的图像产品创建叠加颜色，基本上，当我将鼠标悬停在图像上时，叠加颜色会显示，但不工作。颜色叠加图像使用文本的样式效果

的想法是当我通过鼠标在图像transparecy标题和价格出现带有覆盖颜色

这里是我的代码：

HTML：

<!-- List of products --> 
       <div id="products" class="row list-group"> 
        <div class="item col-xs-4 col-lg-4"> 
         <div class="thumbnail"> 
          <img class="group list-group-image" src="images/products/1.png" alt="" /> 
          <div class="caption"> 
           <h4 class="group inner list-group-item-heading"> 
            Product title</h4> 

           <div class="row go-bottom"> 
            <div class="col-xs-12"> 
             <p class="price"> 
              80 €/120 €</p> 
            </div> 

           </div> 
          </div> 
         </div> 
        </div> 
        <div class="item col-xs-4 col-lg-4"> 
         <div class="thumbnail"> 
          <img class="group list-group-image" src="images/products/1.png" alt="" /> 
          <div class="caption"> 
           <h4 class="group inner list-group-item-heading"> 
            Product title</h4> 

           <div class="row go-bottom"> 
            <div class="col-xs-12"> 
             <p class="price"> 
              80 €/120 €</p> 
            </div> 

           </div> 
          </div> 
         </div> 
        </div> 

        <div class="item col-xs-4 col-lg-4"> 
         <div class="thumbnail overlay"> 
          <img class="group list-group-image" src="images/products/1.png" alt="" /> 
          <div class="caption"> 
           <h4 class="group inner list-group-item-heading"> 
            Color Gold 
           </h4> 

           <div class="row go-bottom"> 
            <div class="col-xs-12"> 
             <p class="price"> 
              80 €/120 €</p> 
            </div> 

           </div> 
          </div> 
         </div> 
        </div> 



      </div>

CSS：

.thumbnail:after { 
    content:'\A'; 
    position:absolute; 
    width:100%; height:100%; 
    top:0; left:0; 
    background:rgba(0,0,0,0.6); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.thumbnail:hover:after { 
    opacity:1; 
} 
    .list-group-item:hover{ 
    background:rgba(0,0,0,.7); 
    } 
     .shop-products .item .thumbnail{ 
      border:none; 
      padding:0; 
      position: relative; 
     } 

     .shop-products .item .thumbnail .caption{ 
      position: absolute; 
      bottom:0; 
      width: 100%; 
      height: 100%; 
      text-align: center; 

     } 

     h4.list-group-item-heading{ 
      text-transform: uppercase; 
      font-weight: bold; 
      color:red; 
      letter-spacing: 3px; 
     } 
     .shop-products .item .thumbnail .caption .price{ 
      color:red; 
      font-size:16px; 
      letter-spacing: 3px; 

     } 
     .go-bottom{ 
      bottom:0px; 
      position: absolute; 
      width: 100%; 
     }

来源

2017-03-15 Pedro

的可能的复制[上仅适用于CSS图像悬停黑色透明覆盖？]（http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only- css） –

我无法找到类list-group-item里面你的代码。

caption应该有背景颜色。

.shop-products .item .thumbnail .caption{ 
    position: absolute; 
    bottom:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    display:none; 
    background:rgba(0,0,0,.7); 

} 
.shop-products .item .thumbnail:hover .caption{ 
    display:block; 
}

来源

2017-03-15 15:53:42 moocodeme

你好，谢谢，它适用于文本，但即时通讯有问题，例如，当我将鼠标移到文本上时，文本正在闪烁覆盖层颜色，我如何才能使文本覆盖颜色上面的文字？我刚刚更新了我的问题，其中包括缩略图上的叠加颜色 – Pedro

给出必须高于另一个高于'z-index'的元素。如果没有声明给它'z-index：1;'。 – moocodeme

颜色叠加图像使用文本的样式效果

回答

相关问题