Question

我试图为我的图像产品创建叠加颜色，基本上当我将鼠标悬停在图像上时会出现叠加颜色，但是不起作用。

这个想法是当我将鼠标放在图像上时，透明度标题和价格会以叠加颜色显示

这是我的代码：

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

我无法在您的代码中找到课程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;
}

彩色叠加图像样式效果与文本

1 个答案: