Overlay image with CSS

Question

I want to overlay the content and the image on click in this image, but its only overlay my content.

Here the following code:

HTML :

<div class="picture-sell-item">
    <%= image_tag ('angel.png') %>
</div>

CSS :

.picture-sell-item {
    position: relative;
    padding: 250px 0;
    text-align: center;
    &.active {
        background-color: rgba(255,0,0,0.8); 
        z-index: 10;
        height: 100%;
        width: 100%;
    }
}

JS :

$(".picture-sell-item img").on('click', function() {
    $(".picture-sell-item").addClass('active');
});

Any help would be appreciated, thank you.

Answer 1

Changing the background color of the wrapping div won't work as it sits below the image in the dom.

However if you use a pseudo :before element you can place this above the image as it's a separate object.

 $(".picture-sell-item img").on('click', function() { $(".picture-sell-item").addClass('active'); }); 

 .picture-sell-item { position: relative; padding: 20px 0; text-align: center; } .picture-sell-item.active:before { content: ""; position: absolute; background-color: rgba(255, 0, 0, 0.8); z-index: 10; height: 100%; width: 100%; top: 0; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="picture-sell-item"> <img src="http://lorempixel.com/400/200/sports"> </div>