css img оттенок работает только тогда, когда изображение не видно (изображение покрывает оттенок?)

Question

Этот вопрос довольно прост, но я не могу найти решение. У меня есть изображение профиля, которое я хочу подкрасить при наведении. Как видно из фрагмента, он работает, но только тогда, когда изображение не видно. Это локальное изображение, поэтому я намеренно показал пример того, что изображение там, а не там. Какие-нибудь мысли?

.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.overlay:hover:after  {
  opacity: .5;
}

<img onclick="sendMessage1()" id="picture1" src="static/images/richie.jpg" class="box overlay">

В этом фрагменте веб-изображение используется, чтобы показать, что я имею в виду.

.box {
  width:100px;
  height:100px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.overlay {
  position: relative;
}

.overlay:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.overlay:hover:after  {
  opacity: .5;
}

<img onclick="sendMessage1()" id="picture1" src="https://www.thoughtco.com/thmb/HBaobb2gkXAlGq-a6K56PeyaLOg=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/clouds-5b6b4e50c9e77c0050491212.jpg" class="box overlay">

Answer 1

Вы не можете использовать псевдоэлемент для покрытия изображения. Поместите свой псевдоэлемент на контейнер вашего <img>,

Обратитесь к этому сообщению для большего количества способов сделать это.

.img-container {
  position: relative;
  width: 350px;
  height: 150px;
  border:1px solid grey;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;;
}

.img-container:after {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  background-color: orange;
}

.img-container:hover:after  {
  opacity: .5;
}

<div class="img-container"><img onclick="sendMessage1()" id="picture1" src="https://via.placeholder.com/350x150" class="box overlay"></div>

Обратитесь к этому сообщению, чтобы узнать больше о <img> теги и псевдоэлементы.