Как наложить цвет на блок с полупрозрачностью?

Question

[Даниил Конев]

Доброго дня Хабр! На картинку наложен фильтр затемняющий картинку, что бы видно было белый текст, при наведении блок смещается плавно на верх, как сделать так, что бы отключить фильтр и наложить цвет #1D3D7B c 80% прозрачности. Спасибо.

https://codepen.io/vhdjywxy-the-scripter/pen/KKWXgEX

Comments

[Максим]

вы песочницу сделайте - не понятно просто - а полупрозрачный цвет делается в rgba

[Даниил Конев]

Максим Ленский, https://codepen.io/vhdjywxy-the-scripter/pen/KKWXgEX

[Даниил Конев]

Максим Ленский, я пробовал rgba, там фильтр накладываю на затемнение, при наведении нужно синий цвет наложить с прозрачностью

Answer 1

[Дмитрий Пыркин]

.story_box .photo_wrapper:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1D3D7B;
    top: 0;
    left: 0;
    opacity: .8;
}

Comments

[Даниил Конев]

Все супер! Получилось, только с белым текстом беда. Он под фон прячется, пробовал ставить z-index, но он почему то не работает.