Hover-Effekt mit Anker-Tag auf Bild funktioniert nicht

Question

Ich möchte this effect für mein Bild.

Ich habe es implementiert, aber ich habe Anker an der Stelle der Figur und wenn ich auf Bild schweben sollte ich in der Lage, darauf klicken und es sollte umleiten. Werden wir es erreichen?

Ich verwende den folgenden Code für den Hover-Effekt:

.tint { 
    position: relative; 
    float: left; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    cursor: pointer; 
    box-shadow: rgba(0,0,0,.2) 3px 5px 5px; 
} 

.tint:before { 
    content: ""; 
    display: block; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: none; 
    transition: all .3s linear; 
} 

.tint:hover:before { background: rgba(0,0,255, 0.5); } 

Wenn ich position:absolute entfernen, wird die Verbindung zu arbeiten beginnt, aber dann der Hover-Effekt ist weg.

Bitte helfen Sie mir, wenn jemand eine Lösung dafür hat.

Vielen Dank im Voraus.

Answer 1

können Sie etwas von der Bedeutung dieses Codes versuchen:

<div> 
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4"> 
<div class="mask"> 
</div> 
</div> 


<style> 
    .mask { position: absolute; 
     height: 100%; 
     width: 100%; 
     transition: all 0.6s ease; 
     left: 0; 
     top: 0; 
     background-color: #0af; 
     opacity: 0; 
    } 
    .mask:hover { 
     background-color: #0af; 
     opacity: 0.3; 
    } 
</style>