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

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

.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">


html css tint hover
person Beran    schedule 07.02.2019    source источник
comment
Не могли бы вы отредактировать заголовок? В данный момент это не имеет особого смысла   -  person Helenesh    schedule 07.02.2019
comment
В чем проблема? Это работает во втором примере. Что не так с вашим местным имиджем? Проверьте это и отладьте, мы не можем исправить то, что вы не можете воспроизвести во фрагменте.   -  person Islam Elshobokshy    schedule 07.02.2019
comment
спасибо, я просто пытаюсь показать, что когда изображение не видно (поэтому, когда его нельзя найти), оно работает, но когда изображение отображается, вы не можете видеть оттенок. Название отредактирую, спасибо.   -  person Beran    schedule 07.02.2019
comment
Вы не должны использовать ::before/::after для элементов img для начала, stackoverflow.com/questions/5843035/   -  person 04FS    schedule 07.02.2019
comment
спасибо 04fs :) использование div сработало нормально!   -  person Beran    schedule 07.02.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете использовать псевдоэлемент для покрытия изображения. Поместите свой псевдоэлемент в контейнер вашего <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>

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

person Jake    schedule 07.02.2019