How to make a translucent gradient over an image?

Question

css

Hello. There is a background image inserted not through css. I want to make a transparent gradient at the bottom of the image (as with a mask in Photoshop), I googled, I saw a lot of options, filters (css, svg), masks, gradients, etc., but something didn’t work out. Can anyone suggest something useful? )

Answer 1

https://codepen.io/alexcarpenter/pen/LveDx

Answer 2

So? jsfiddle.net/4uvgu3sh/2
What exactly doesn't work for you?

Answer 3

Yes, but I do not insert images through bg.

<div class="header-bg-img">
  <img src="images/img.jpg" alt="">
</div>

I set a linear gradient for the header-bg-img, and for the image I set transparency, it seems to work somehow, but the border between the image and the background is still visible from below. Maybe you can somehow move the gradient a little higher? ))