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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -