How To Create a Rollover Image Effect In Blogger

We often come across rollover image effects on many blogs. When you hover your mouse over an image on a blog or website, the image object changes to another image object. This effect is known as a rollover effect. Many bloggers use this effect to showcase the interactivity of an image, similar to hyperlinks on a blog.

Creating rollover image effects for your images is relatively easy. In this post, I will explain the process of creating a rollover image effect in a simple and straightforward manner.

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

Creating a rollover image effect for your Blogger image is easy. It only requires two lines of code to achieve this effect for your blog images. This method is not exclusive to Blogger blogs; it can also be applied to WordPress. Here, I will show you how to add a 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 the following code into the HTML/JavaScript widget box.

 <a href="Your 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 "Your Blog Url" with your blog address. When a user clicks on the image, it will redirect to that blog link.

Your First Image Url : Replace "Your First Image Url" with the image link that will appear before the cursor hovers over it.

Your Second Image Url : Replace "Your Second Image Url" with the image link that will appear when the cursor hovers over it.

Step 5 : Save the widget.

Now, open your Blogger blog and observe the rollover effect on the image you added by placing your cursor on that image. You can use this method for any images on your Blogger blog in a similar way.