How to Create Rollover Image Effect Change Image on Mouseover and Mouseout

Today I want to share with you an interesting thing that is rollover image effect. Here I show you how to create rollover image effect. Rollover image is an attractive image, this image increases your posts as well as your blog beauty.

There are a lot of bloggers are not concern about rollover image effect and they don't know how to create rollover image effect. My article helps them who are crazy about how to create rollover image effect. A rollover image is a changeable image. When you place your mouse pointer on one image then it turns into another image. This image effect is an awesome technique to attract the visitors.

You can use rollover image effect on your blog post, social icons on your blog or your blog's sidebar. This image makes a post more attractive to the readers. Here I show how to create rollover image effect.

rollover image effect
Demo Image Here

Add Rollover Image Effect on Blog Post

Step 1: Just go to Blogger then your post HTML and then paste the below code.

<a href="Your Desired URL Address"><img src="First Image URL Paste Here" onmouseover="this.src='Second Image URL Paste Here'" onmouseout="this.src='First Image URL Paste Here'" /></a>  

  • Now you have to change  something here like below.

1. Replace Your Desired URL Address with your blog's URL or other address where somebody will be sent when they click on the image. Such as my URL is

2. Replace First Image URL Paste Here with your first image URL address which will be appear before you hover over it.

3. Replace Second Image URL Paste Here with your second image URL address.
  • Now click on save then go to your blog post and check it out
If you want to add rollover image effect on you blog's layout as a gadget. Go to your Dashboard then Layout >>>> Add a Gadget >>>> HTML/JavaScript then paste the code into the Content box.

Now you have done, if you feel any problem please comment me on below.


Post a Comment