Farbe Overlay Bilder Styling Effekt mit Text

Question

Ich versuche, eine Overlay-Farbe zu meinen Bildern Produkte zu erstellen, im Grunde wird die Overlay-Farbe angezeigt, wenn ich die Bilder schweben, aber nicht funktioniert.

Die Idee ist, wenn ich mit der Maus über die Bilder eine transparecy den Titel und den Preis erscheint mit der Overlay Farbe

Hier passieren ist mein Code:

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

Answer 1

Ich bin nicht in der Lage, die Klasse list-group-item innerhalb zu finden dein Code.

Die caption sollte die Hintergrundfarbe haben.

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