How to apply a colored translucent background to a block that already has a background image when hovering over the parent block?

Question

css

There is this markup:

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

The image block has an image in the background, the content block is just text. How to make it so that when you hover over the entire father block, another colored background with a transparency of 50% is superimposed on the image block. that is, the back image should be visible through this colored background. I did this, but for some reason it doesn't work:

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

Plz tell me what's wrong.

Answer 1

Read about ::before and ::after on elements - this is what you need.
Example.