顏色疊加圖像使用文本的樣式效果

即時嘗試爲我的圖像產品創建疊加顏色，基本上，當我將鼠標懸停在圖像上時，疊加顏色會顯示，但不工作。顏色疊加圖像使用文本的樣式效果

的想法是當我通過鼠標在圖像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

顏色疊加圖像使用文本的樣式效果

回答

相關問題