Fetch Image On Hover any Link

To display image when a link is hovered is easy, no need javascript or any plugin. This follow below tips.

All you need just  css. on active: let display: none. But whene hover show image or display:block.

 
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; 
-webkit-box-shadow: 3px 2px 29px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 2px 29px 2px rgba(0,0,0,0.75);
box-shadow: 3px 2px 29px 2px rgba(0,0,0,0.75);
}

 

example:

<div class="hover_img">
<a href="<?php echo $p['link_dl']; ?>" rel="nofollow" target="_blank">
THIS_IS_TEXT
<span><img src="IMAGE_URL"></span>
</a>
</div>

Demo here

Share to

Do You Know!