<a href="MAIN URL"><img src="FIRST IMAGE URL" onmouseover="this.src='SECOND IMAGE URL'" onmouseout="this.src='FIRST IMAGE URL'" /></a>You have to do work on above colorful text. Read the below guidance for better sympathize.
Main URL: There you have to add main link it meant the link which you want to add for clicking.
First image URL: Replace this text with your First Image URL, it shows the initial image before hovering.
Second Image URL: Change this text with your second image URL and it shows the final image when you mouse over the image, then the image appears and it was second image which was shown after hover.
Little Instruction of Setup on Blogger
Open your blog dashboard.
Go to Layout>> Click on Add a Gadget.
Select HTML Script and add the above codes.
Click on Save and see the hover magic of HTML with Image.
Check Out: New CSS3 Tutorials with Best CSS Examples.
This was a simple tutorial, but it is much useful and interesting you can add this effect anywhere on any image. Some popular webmasters use this effect in the footer area for developing good backlink because it is not giving any bugs and error which decrease our page load time often it increase our blog backlinks and made him SEO Friendly.