css img tint works only when image is not visible (image is covering tint?)

Question

This question is pretty simple, but I can't seem to find a solution. I have a profile image which I want to become tinted on hover. As you can see in the snippet, it works, however only when the image isn't visible. It is a local image, so I have intentionally shown an example of the image being there and not being there. Any thoughts?

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

In this snippet, a web image is used to show what I mean.

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

Can you please edit your title? It doesn't make much sense at the moment — Helenesh, Feb 07 '19 at 12:48
What's the problem? It works in your second example. What's wrong with your local image? Inspect it and debug, we can't fix what you can't reproduce in a snippet. — Alexandre Elshobokshy, Feb 07 '19 at 12:51
thanks, im just trying to show that when the image isnt visible (so when it cant be found), it works, but when the image is displayed, you can't see the tint. Ill edit the title, thanks. — Beran, Feb 07 '19 at 12:52
You should not be using ::before/::after on img elements to begin with, https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements — 04FS, Feb 07 '19 at 13:12

Jake · Answer 1 · 2019-02-08T08:20:49.650

You cannot use a pseudo-element to cover an image. Place your pseudo-element on a container of your <img>.

Refer to this post for more ways to do this.

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

Refer to this post to learn more about <img> tags and pseudo-elements.

css img tint works only when image is not visible (image is covering tint?)

1 Answers1