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: absolute; height: 100%; width: 100%; transition: 0.6s ease; left: 0; top: 0; background-color: #0af; opacity: 0; } .mask:hover { background-color: #0af; opacity: 0.3; } </style>
Comments
Post a Comment