html5 - Hover effect with anchor tag on image not working -
i want this effect image. i implemented have anchor @ place of figure , when hover on image should able click on , should redirect. achieve it? i use following code hover 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: .3s linear; } .tint:hover:before { background: rgba(0,0,255, 0.5); } if remove position:absolute , link starts working hover effect gone. please me if has solution this. thanks in advance. you can try meanings of code: <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: ab