title: How to add a semi-transparent background to a card's image overlay
body: <p>I can't figoure out how to create an effect like this using Bootstrap's Card with Overlay:</p>
  <p><a href="https://i.stack.imgur.com/zoDpm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zoDpm.png" alt="enter image description here" /></a></p>
  <p>Notice the opaque background of the text - my overlay always seems to cover the entire card's image.</p>
  <pre><code>&lt;div class=&quot;row cols-flex&quot;&gt;
    &lt;div class=&quot;col&quot;&gt;
  
      &lt;div class=&quot;card bg-dark text-white&quot;&gt;
        &lt;img src=&quot;assets/images/bp/road.png&quot; class=&quot;card-img&quot; alt=&quot;...&quot;&gt;
        &lt;div class=&quot;card-img-overlay d-flex flex-column align-items-start overlay&quot;&gt;
  
          &lt;p class=&quot;card-text mt-auto&quot;&gt;Check out cool stuff&lt;/p&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.overlay {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: black;
  }
  </code></pre>
  <p>Any idea what I'm doing wrong?</p>