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/

Answer 1

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>