color overlay images styling effect with text

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

Possible duplicate of [Black transparent overlay on image hover with only CSS?](http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css) — Arjan Knol, Mar 15 '17 at 15:49

score 1 · Accepted Answer · answered Mar 15 '17 at 15:53

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

answered Mar 15 '17 at 15:53

moocodeme

26
4

hello and thanks, it works regarding with text, but im having a problem, for example when i mouse over, the text is behing the overlay color i make it, how can i make the text above the overlay color i made? I just updated my question including the overlay color on the thumbnail – Pedro Mar 15 '17 at 15:57
Give the element which has to be above another a higher `z-index`. If none is declared give it `z-index:1;`. – moocodeme Mar 15 '17 at 16:03

color overlay images styling effect with text

1 Answers1