:after class not working with img tag

Question

i want to add background color overlay effects when hovering on the image.But i have tried few times with css pseudo-class:after, it is just not working, the code as:

<div class="test">
  <img src="assets/img/slide1.jpeg" class="overlay" alt="">
   <!-- my image tag -->
</div>

the css:

  .test{
  width: 50%;
  height: 50%;
}

.overlay{
  width: 100%;
  height: 100%;
  position: relative;
}

.overlay:after{
  content: "test";
  position: absolute;
  font-size:3em;
}

the .overlay:aftercontent is not showing up, but it is working when i am using :after class on the <p>or <span>tag, and i was intend to adding overlay color effects on my <img>tag as:

/*adding background color on the image tag using :after*/
.overlay:after{
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 0;
}

So my questions are: 1. Why the pseudo class :after not working on the img tag but working with the text tag such as <p>or<h1>? 2. Is there anything wrong with my code on adding red bg color using :after?

:after only works on container elements which can contain text content (because it works by attaching content after the initial content), so as you've discovered, unfortunately it won't work on img, you need to use a wrapper element and attach it to that. — delinear, Nov 22 '17 at 16:05

score 4 · Answer 1 · answered Nov 22 '17 at 16:04

Pseudo-elements can only be declared on containing elements; elements that can contain other elements, e.g: <p>, <span>, <h1>, etc.

Since <img> is a self-closing void tag (also known as empty elements) that cannot contain other elements, pseudo-elements, like :after or :before cannot be used.

Empty element - a list of empty elements

An empty element is an element from HTML, SVG, or MathML that cannot have any child nodes (i.e., nested elements or text nodes).

score 0 · Answer 2 · answered Nov 22 '17 at 16:10

You need to wrap your img in a block element to use :after or psuedo elements.

.overlay{
  position:relative;
  width: 50%;
  height: 50%;
}

.overlay img{
  width: 100%;
}

/*adding background color on the image tag using :after*/

.overlay:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 1;
  opacity: 0.4;
}

<div class="test">
  <div class="overlay">
    <img src="http://via.placeholder.com/350x150" alt="hola">
  </div>
</div>

score 0 · Answer 3 · answered Nov 22 '17 at 16:24

An :after pseudo element is inserted inside the element to which it is applied, as its last child. Because it is not possible for an img tag to have children, :after will have no effect on it.

Instead, you can apply the overlay to its parent element:

<div class="wrap">
    <img src="http://via.placeholder.com/350x150">
</div>

CSS:

.wrap {
    position: relative;
}
.wrap img {
    display: block;
}
.wrap:hover:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: red;
}

:after class not working with img tag

3 Answers3