How to add a gradient over an image (not in background)?

Question

I want to add opacity in the bottom of my images in a Carousel Bootstrap for a better reading of captions.

I managed to add the linear-gradient on a background-image, but not in the carousel... So, I need your help !

Carousel

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

gradient CSS

background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%);