Bootstrap 4 link on card image with overlay

Question

I am struggling to get the link on the image itself to work. So far I could only manage to get the link on the text overlay at the bottom over the image, but not on the rest of the image. Every time I try something it breaks the layout of the card and the overlay does not work anymore. Any idea?

.bg-semitransparent { background-color: rgba(60,60,60,0.6); }

<div class="card text-white">
    <img src="...image" alt="Angel #1" class="img-fluid" style="" />
    <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
        <div class="card-text border-0 bg-semitransparent text-center">
            <a href="...link">Anchor Text</a>
        </div>
    </div>
</div>

Answer 1

If you want, you can try like this: thats a simple trick but solve your issue

<div class="card text-white">
<img src="https://dummyimage.com/350x450/" alt="Angel #1" class="img-fluid" style="" />
<a href="...link">
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
    <div class="card-text border-0 bg-semitransparent text-center">
        Anchor Text
    </div>
</div>
</a>
</div>

Answer 2

Solution 1

By changing HTML code structure

.bg-semitransparent { background-color: rgba(60,60,60,0.6); }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<a href="...link"><div class="card text-white">
    <img src="https://dummyimage.com/450x450/" alt="Angel #1" class="img-fluid" style="" />
    <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
        <div class="card-text border-0 bg-semitransparent text-center">
            Anchor Text
        </div>
    </div>
</div>
</a>

Solution: 2

With JQuery

$(".card").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});

.bg-semitransparent { background-color: rgba(60,60,60,0.6); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card text-white">
    <img src="https://dummyimage.com/450x450/" alt="Angel #1" class="img-fluid" style="" />
    <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
        <div class="card-text border-0 bg-semitransparent text-center">
            <a href="...link">Anchor Text</a>
        </div>
    </div>
</div>