title: How can i add a black layer over top of image with opacity
body: <p>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.</p>
  
  <p>I am using Bootstrap 4 &amp; below is the code i am using including CSS :)</p>
  
  <p>Any help will be much appreciated. Thank you</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;    
      &lt;div class="card-overlay" style="background-image: url('img/dirt1.jpg')"&gt;
        &lt;div class="white-text text-center"&gt;
          &lt;div class="card-block"&gt;
            &lt;h3&gt;Project title&lt;/h3&gt;
            &lt;p&gt;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!.
            &lt;/p&gt;
            &lt;a class="btn btn-primary" href="..."&gt;Read More&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.card-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
  </code></pre>