Внутри картинка. Как реализовать подобное?

Question

[DestroyerZzz]

Вот. Хочу чтобы было 3 слоя. При наведении на общий div чтобы цвет пропадал и оставалась только картинка.

Попробовал так, но цвет находится ЗА картинкой, а надо чтобы был ПЕРЕД. Логотип стоит как отдельный в 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;
}

Comments

[Кирилл Туровников]

Фоновое изображение всегда будет выше фонового цвета, так что надо делать еще один вложенный тэг с цветом фона

Answer 1

[Grigruss]

opacity:0; - прозрачно.
opacity:0.5; - полупрозрачно
opacity:1; - НЕ прозрачно

Comments

[DestroyerZzz]

и что? Я знаю это....

[Grigruss]

DestroyerZzz: да. сейчас обратил внимание, что про альфаканалы вам тоже известно... тогда не пойму в чем у вас проблема?... тык

[DestroyerZzz]

Григорий: спасибо. А то я уже z-index-ами пытался)

Answer 2

[Виталий Инчин ☢]

Набросал: jsfiddle.net/In4in/bgga0vdh/1

Answer 3

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

jsfiddle.net/ps1panda/wxhnmj2q