Почему при наведении opacity скрывает всю картинку?

Question

[Станислав Пономарев]

Народ, мне нужно чтоб при наведении картинка меняла прозрачность, а opacity полностью перекрывает. Подскажите почему? https://codepen.io/chembyrleno/pen/NWqbBmB

Answer 1

[Andrey Vasilev]

https://codepen.io/Nolis/pen/wvaoEBx

Answer 2

[approximate solution]

Background уберите при hover

Comments

[Станислав Пономарев]

Дак мне нужно, чтоб именно этим цветом перекрывалась, но только с прозрачностью

[approximate solution]

Станислав Пономарев, тогда не правильно задаёте.
:hover
rgba(ваш цвет, opacity 0,5)

В rgba задаётся такое.

[approximate solution]

Станислав Пономарев, rgba(115, 115, 146, 0.5)

[Станислав Пономарев]

approximate solution и так не выходит https://codepen.io/chembyrleno/pen/NWqbBmB

[approximate solution]

Станислав Пономарев,

<div class="AB">
     <div class="bg-color">
  </div> 
</div>

.AB {
	width: 200px;
	height: 200px;
	background-image: url(https://avatars.mds.yandex.net/get-pdb/1976636/74ea2b29-65e5-4cde-be7f-e5c04c403dca/s1200);
  position: relative;
}

.AB:hover .bg-color {
  background: rgba(227, 9, 9, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

лучше будет сделать overlay

[Станислав Пономарев]

approximate solution, спасибо)