Gradient overlay image

Question

I am trying to place a gradient overlay over an image. But doesn't seem to take any effect when I place my gradient with :after pseudo-class

The image effect I am trying to recreate: https://p221.p4.n0.cdn.getcloudapp.com/items/X6ueRLQZ/8e2b620d-9f22-4ba5-a414-45be7f614147.png?v=660238ff4322e9f1b6494f751bc1117f

Trying to do it with pure CSS. Figured I need a gradient and perhaps also some greyscale filter in order to turn the image to black/white. For some reason, my gradient is not being applied on top of the image.

HTML

<img src="https://images.unsplash.com/photo-1568579998406-c2886c8323f5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" style="width: 300px; height: 240px;" alt="some alt text" class="cow">

My CSS

.cow {
  position: relative;
}

.cow:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
 background: linear-gradient(#25333d 0%, rgba(37, 51, 61, 0) 100%);
}

Working JSFiddle: https://jsfiddle.net/6evb5p0r/

Does this answer your question - https://stackoverflow.com/questions/7396469/why-dont-before-and-after-pseudo-elements-work-with-img-elements — Paulie_D, Apr 24 '21 at 11:59
Don't think so? I have applied class cow to my img element and applying pseudo :after element to the cow class so it's cow:after ? — TurboTobias, Apr 24 '21 at 12:00
Move your pseudo `::after` to a parent wrapper a `div` for example and apply overlay on it — Waseem Almoliky, Apr 24 '21 at 12:08
oohhh... That makes sense! Thanks! That solved issue. Please post as answer :) — TurboTobias, Apr 24 '21 at 12:10

score 0 · Accepted Answer · answered Apr 24 '21 at 12:17

Move your pseudo ::after to a parent wrapper a div for example and apply overlay on it. thanks.

.cow {
  position: relative;
  display: inline-block;
}

.cow:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#25333d 0%, rgba(37, 51, 61, 0) 100%);
}

<div class="cow">
  <img src="https://images.unsplash.com/photo-1568579998406-c2886c8323f5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" style="width: 300px; height: 240px;" alt="some alt text">
</div>

Gradient overlay image

1 Answers1