Bootstrap 4 lien sur l'image de la carte avec superposition

Question

J'ai du mal à faire fonctionner le lien sur l'image elle-même. Jusqu'à présent, je n'ai réussi à obtenir le lien que sur le fond de l'image, mais pas sur le reste de l'image. Chaque fois que j'essaye quelque chose, cela brise la disposition de la carte et la superposition ne fonctionne plus. Une idée?

.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

Si vous voulez, vous pouvez essayer comme ceci: thats une astuce simple mais résoudre votre problème

<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

Par structure de changement de code HTML

.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

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