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

<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;
}