Наложение изображения с помощью CSS

Question

Я хочу наложить содержимое и изображение на клик на этом изображении, но его единственный наложенный мой контент.

Вот следующий код:

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

Любая помощь будет признателен, спасибо.

Answer 1

Изменение цвета фона оберточного div не будет работать, поскольку оно находится под изображением в dom.

Однако, если вы используете элемент pseudo :before, вы можете разместить его над изображением, так как это отдельный объект.

$(".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>