title: Bootstrap 4 card on hover overlay image only
body: <p>I'm using a Bootstrap 4 card. When I hover over any area of the card, and transparent overlay covers the entire card. The effect I want to have is for the overlay to appear over the top image area only, not the entire card.</p>
  <p><strong>HTML:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;m-4&quot;&gt;
  &lt;div class=&quot;card&quot; style=&quot;width: 18rem;&quot;&gt;
    &lt;img class=&quot;card-img-top&quot; src=&quot;https://via.placeholder.com/150x100&quot; alt=&quot;Card image cap&quot;&gt;
    &lt;div class=&quot;card-overlay&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;card-body&quot;&gt;
      &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
      &lt;p class=&quot;card-text&quot;&gt;Some quick example text.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre class="lang-css prettyprint-override"><code>.card-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background: rgba(0, 0, 0, 0.5);
    }
  
  .card:hover .card-overlay {
      opacity: 1;
    }
  </code></pre>
  <p><a href="https://codepen.io/Pixel-Paul/pen/GRZVMqO" rel="nofollow noreferrer">Link to CodePen</a></p>