How To Create a Rollover Image Effect In Blogger

We can see rollover image effects on many blogs. When you move your mouse hover over an image in a blog/website , the image object changes to other image object , this effect is known as rollover effect. Many bloggers are using this effect to show the activeness of an image. Just like the hyperlinks on your blog.
It is easy to create rollover image effects for your images . In this post I'm explaining the rollover image effect with easy process.

How To Create a Add Rollover Image Effect For Your Blogger Images :

It is easy to create rollover image effect for your Blogger image. It is just two lines code to create this effect for your blog images. This method is not for Blogger blogs , also same for WordPress. Here I'm showing you how to add rollover effect to an image on your Blogger blog

Follow below steps to create and add rollover effect to your Blogger images :

Step 1 : Go to your Blogger Dashboard

Step 2 : Click Layout

Step 3 : Click on add Gadget and add HTML/JavaScript widget

Step 4 : Paste below code in HTML/JavaScript widget Box

 <a href="You Blog Url"><img src="Your First Image Url" onmouseover="this.src='Your Second Image Url'" onmouseout="this.src='Your First Image Url'" /></a>

Changes You Must Do :

You Blog Url : Replace You Blog Url with your blog address , When user click on the image , it will goes to that blog link.

Your First Image Url : Replace Your First Image Url with the image link ( which will appear before the cursor hover over it )

Your Second Image Url : Replace Your Second Image Url with the image link ( which will appear when the cursor hovers over it )

Step 5 : Save your widget.

Now open your Blogger blog and observe the rollover effect on the image you added by Just placing your cursor on that image.You can use this method to any images on your Blogger blog like this .