How to make links work with card-img-overlay in Bootstrap v4

Question

I'm having an issue where any Bootstrap v4 cards using the card-img-overlay to display text over an image prevents links below that image from working.

These links do work:

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

These links do NOT work:

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-img-overlay card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

I see there is an open issue regarding this for bootstrap v4, but can anyone help with a workaround that would preserve the same look?

Answer 1

The overlay is position: absolute which gives that element a z-index, and the rest of the content in the card is statically positioned, so none of it has a z-index. You can give the link a z-index by adding a non-static position, and since your card link comes after the overlay in the HTML, the stacking order will put the card link's stacking order on top of the overlay.

.card-link {
  position: relative;
}