How can i add a black layer over top of image with opacity

I would like to know if there is a way i can add a black layer over my image but have it slightly transparent so you can still see the image.

I am using Bootstrap 4 & below is the code i am using including CSS :)

Any help will be much appreciated. Thank you

<div class="row">
  <div class="col-md-6">    
    <div class="card-overlay" style="background-image: url('img/dirt1.jpg')">
      <div class="white-text text-center">
        <div class="card-block">
          <h3>Project title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat 
 fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus 
 minus error nisi architecto nulla ipsum dignissimos. Odit
            sed qui, dolorum!.
          </p>
          <a class="btn btn-primary" href="...">Read More</a>
        </div>
      </div>
    </div> 
  </div>
</div>

CSS:

.card-overlay {
  background: rgba(0, 0, 0, 0.5);
}

Solution

You have to put the .car-overlay div inside a div with the background. This is because if an element has a background image and a background color the background color will appear behind the background image.

.card-overlay {
  background: rgba(0, 0, 0, 0.5);
}

<div class="row">
  <div class="col-md-6">
    <div style="background-image: url('https://placekitten.com/640/360');background-size:cover;">
      <div class="card-overlay">
        <div class="white-text text-center">
          <div class="card-block">
              <h3>Project title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit
                  sed qui, dolorum!.</p>
               <a class="btn btn-primary" href="...">Read More</a>
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

If you didn't want to change your HTML structure you could use CSS3 multiple background with a gradient rather than a background color, because you can't layer background colors.

.card-overlay {
  background:
  linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5)
  ),
  url('https://placekitten.com/640/360');
}

<div class="row">
  <div class="col-md-6">
    <div class="card-overlay">
        <div class="white-text text-center">
          <div class="card-block">
              <h3>Project title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat
       fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus
       minus error nisi architecto nulla ipsum dignissimos. Odit
                  sed qui, dolorum!.</p>
               <a class="btn btn-primary" href="...">Read More</a>
         </div>
      </div>
    </div>
  </div>
</div>