Как наложить цветный полупрозрачний фон на блок, у которого уже есть фон-картинка, при наведении на родительский блок?

Question

[Shadowman69]

Есть такая разметка:

<div class="father>
     <div class="image"></div>
     <div class="content"></div>
</div>

Блок image имеет картинку на заднем фоне, в блоке контент просто текст. Как сделать так, чтоб при наведении на весь блок father, на блок image накладался еще один цветный фон з прозрачностью в 50%. тоесть заднюю картинку должно быть видно через этот цветный фон. Я сделал вот так, но почему то не работает:

.father:hover .image {
    background: url('images/card1.png') no-repeat 0 0,
                         rgba(214, 29, 89, 0.5);
}

Подскажите плиз что не так.

Answer 1

[Алексей]

Почитайте про ::before и ::after у элементов - это то что вам нужно.
Пример.

Answer 2

[Егор Лавренов]

Псевдоэлементы, либо filter, + помните что можно 2 фона задать)

Comments

[Shadowman69]

Вот задал вторым фоном полупрозрачный цвет, но работать не хочет)