Ссылки не работают с Overlay

Question

У меня есть несколько плиток с накладками, которые темнеют и название появляется при наведении указателя мыши над:

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

Проблема заключается с эффектом наложения на месте, его блокирует ссылку и делает ее непривлекательной. Я пробовал общаться с z-индексами, но когда одна вещь работает, другая вещь блокируется. Я хочу, чтобы наложение и текст работали, когда они зависали, но также доступны для кликов, возможно ли это?

Answer 1

Вы можете перемещать: до и: после селекторов до a тег, а затем изменить .photo a:before в центр текста по вертикали.

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