Image source effects on mouse over

Hi Friends, You could see some hover effects for social icons  in many of websites,  which is quite to easy to implement it. Nowadays there is lot of ways to implement it. i am going to show the basic one which is easy for all.

For eg.

Take 2 image icons as you want to make hover effects,  I would recommend the images extension to be in png or gif.

       

I take these images 2 above images.

<div>
<a href="https://www.facebook.com/niyaz.prec" target="_blank"><img src="icon-fb.png" alt="Facebook" onmouseover="this.src='icon-fb-hover.png';" onmouseout="this.src='icon-fb.png';" /></a>
</div>

If it is helpful, update your comments. Thanks for reading my blog.