Как залить блок цветом?

Question

[MegaSanchez]

Есть блок с информацией на блоке чекбокс (прочитал).
Задача. После нажатия на чекбокс блок должен закраситься в полупрозрачный цвет. Причем цвет должен изменить не бэкграунд. Плашка цвета должна оказаться как бы сверху всего и картинки и текста и чекбокса.

Как это сделать?

Comments

[MR.TOSTER Гипард Валерьевич]

Скинь пример скрин как есть и на фотошопе или по другому как то сделай картинку как должно быть. Просто из твоих слов сложно понять что есть что и что куда, но чувствую что простое что то хочешь сделать.

[MR.TOSTER Гипард Валерьевич]

Тебе нужно чтобы div новый возник полупрозрачный с цветом поверх блока с контентом и как бы его закрыл?

[MegaSanchez]

да, наверно

[MegaSanchez]

Вот скрин с комментарием joxi.ru/52anlNytvaWBA0

Answer 1

[Armozlo]

https://jsfiddle.net/1j0exyrv/
Вот так например.

Comments

[MegaSanchez]

Армозло, спасибо. Всё круто, но есть одно но. Блоков несколько. Когда я ставлю галочку блок перекрашивается на 1 сек, а потом исчезает. Так вот, когда ставлю галочку, меняют цвет все блоки
Посмотри на явакод, как сделать, чтобы появлялось конкретно в том блоке, который чекаю

$(document).ready(function() {
var count = $('.cours').length;
var i = 0;
$('.block_second .container .cours .cours_saw label').click(function() {
$('.cours-color').show();
$(this).closest('.cours').addClass('hidden');
$(this).closest('.cours').delay(1000).fadeOut(1000);
i++;
if (count == i) {
$('.block_second').addClass('comp');
$('.mission_comp').fadeIn(3000).css('display','block');
}
})
});

[MegaSanchez]

цветовой блок - '.cours-color'
сам блок основной - '.cours' и с таким классом 6 блоков