我试图为我的图像产品创建叠加颜色,基本上当我将鼠标悬停在图像上时会出现叠加颜色,但是不起作用。
这个想法是当我将鼠标放在图像上时,透明度标题和价格会以叠加颜色显示
这是我的代码:
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%;
}
答案 0 :(得分:1)
我无法在您的代码中找到课程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;
}