Picture inside. How to implement something like this?

Question

css

Here. I want to have 3 layers. When hovering over a common div, the color disappears and only the image remains.
I tried this, but the color is BEHIND the picture, but it needs to be BEFORE. The logo stands alone in the HTML.

#w2:hover{
  background-color: rgba(255,140,251,0.5);
}

#w2{
  background-color: rgba(255,140,251,1);
  background-image: url('img/2 blur.png');
  background-size: cover;
  background-position: center;
}

Answer 1

opacity:0; - transparent.
opacity:0.5; - translucent
opacity:1; - NOT transparent