Add Image Hover Effects (image rollover by mouse)

Image hover effects is not new in web designing but its styles are new by CSS3 and HTML 5, the term hovers mean changing so in this sense...

Image hover effects is not new in web designing but its styles are new by CSS3 and HTML 5, the term hovers mean changing so in this sense image hover means changing of images when we mouse over the hover image it roll over and new image comes in a second. There are lots of styles from which we change every simple box into a dynamic animation likewise you can give some cool effects to simple image by some new styles like opacity and rollover (mouse over) style. Let's start with simple HTML5 rollover image effect.

Demo

See the below codes with meditation.

<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.