web-dev-qa-db-de.com

Bootstrap 4 Link auf dem Kartenbild mit Overlay

Ich habe Mühe, den Link auf dem Bild selbst zum Laufen zu bringen. Bisher habe ich es nur geschafft, den Link auf der Textüberlagerung unten über das Bild zu bekommen, nicht aber auf den Rest des Bildes. Jedes Mal, wenn ich etwas versuche, bricht es das Layout der Karte und das Overlay funktioniert nicht mehr. Irgendeine Idee?

.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>
cssoverlaybootstrap-4
4
Paul Godard

Wenn Sie möchten, können Sie dies versuchen: Das ist ein einfacher Trick, aber Sie können Ihr Problem lösen

<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>
3
Awsme Sandy

Lösung 1

Durch Ändern der HTML-Codestruktur

.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>

Lösung: 2

Mit 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>
0
Znaneswar