Liens ne fonctionne pas avec superposition

Question

j'ai quelques tuiles avec des superpositions qui obscurcissent et un titre apparaît quand plané au-dessus:

.photo { 
 
    position: relative; 
 
    margin: 10px 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 
.photo img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 
.photo:after, 
 
.photo:before { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
} 
 
.photo:after { 
 
    content: '\A'; 
 
width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 
.photo:before { 
 
    width: 100%; 
 
    content: attr(data-content); 
 
    color: $white; 
 
    text-align: center; 
 
    font-size: 200%; 
 
    z-index: 1; 
 
    padding: 4px 10px; 
 
} 
 
.photo:hover:after, 
 
.photo:hover:before { 
 
    opacity: 1; 
 
}

<div class="wrap-photo"> 
 
    <div class="photo" data-content="Benefits"> 
 
    <a href="kb_view.do?sysparm_article=KB0010030"> 
 
     <img src="Wellness.jpg" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo" data-content="Payroll"> 
 
    <a href="kb_view.do?sysparm_article=KB0010031"> 
 
     <img src="award.jpg" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo" data-content="Training"> 
 
    <a href="#" target="_blank"> 
 
     <img src="Personnel.jpg" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 
</div>

Le problème est dû à l'effet de superposition en place, bloque le lien et le rend illisible. J'ai essayé de jouer avec les index z, mais quand une chose marche, l'autre chose est bloquée. Je veux que la superposition et le texte fonctionnent lorsque survolés, mais aussi cliquables, est-ce possible?

Answer 1

Vous pouvez déplacer: avant et: après les sélecteurs à une balise, puis modifiez .photo a:before pour centrer le texte verticalement.

.photo a:before { 
    [...] 
    -ms-transform: translate(0, -50%); 
    -webkit-transform: translate(0, -50%); 
    transform: translate(0, -50%); 
    top: 50%; 
} 

.photo { 
 
    position: relative; 
 
    margin: 10px 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
.photo img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
} 
 

 
.photo a:after, 
 
.photo a:before { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
} 
 

 
.photo a:after { 
 
    content: '\A'; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.photo a:before { 
 
    width: 100%; 
 
    content: attr(data-content); 
 
    color: $white; 
 
    text-align: center; 
 
    font-size: 200%; 
 
    z-index: 1; 
 
    -ms-transform: translate(0, -50%); 
 
    -webkit-transform: translate(0, -50%); 
 
    transform: translate(0, -50%); 
 
    top: 50%; 
 
} 
 

 
.photo a:hover:after, 
 
.photo a:hover:before { 
 
    opacity: 1; 
 
}

<div class="wrap-photo"> 
 
    <div class="photo"> 
 
    <a href="kb_view.do?sysparm_article=KB0010030" data-content="Benefits"> 
 
     <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo"> 
 
    <a href="kb_view.do?sysparm_article=KB0010031" data-content="Payroll"> 
 
     <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 

 
    <div class="photo"> 
 
    <a href="#" target="_blank" data-content="Training"> 
 
     <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" /> 
 
    </a> 
 
    </div> 
 
</div>