color overlay images styling effect with text - html

Question

im trying to create a overlay color to my images products, basically the overlay color will appear when i make hover to the images, but isnt working.
The idea is when i pass the mouse over the images a transparecy the title and price appears with the overlay color
Here is my 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

I'm not able to find the class list-group-item inside your code.
the caption should have the background-color.
.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;
}