画像上のアンカータグでホバー効果が働いていません

Question

私の画像にthis effectが必要です。

私はそれを実装しましたが、図の場所にアンカーがあります。画像上にマウスを置くと、クリックする必要があり、リダイレクトする必要があります。私たちはそれを達成するでしょうか？

私はホバー効果のために、次のコードを使用します。

.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); } 

私はposition:absoluteを削除する場合は、リンクが稼働を開始したが、その後ホバー効果がなくなっています。

誰かがこれに対する解決策を持っている場合は、この手伝いをしてください。

ありがとうございます。

Answer 1

あなたは、このコードの意味で何かを試すことができます。

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