How to Change Image on Mouse Hover - Rollover Effect

You might have seen this sort of effect on many websites whenever you roll over on any image with your mouse the image changes to a different image well that's nothing not the script and not a CSS effect but a simple HTML coding would help you in achieving that effect so we are going to upload to images and one is the static image which is going to be the initial image and the second image is going to be the rollover image so when anyone hovers mouse over that image second image is going to pop up and it's going to replace the first image so this effect could be used in case you want to highlight any faded image.

• How to Change or Shuffle Ad Banners on Page Refresh
• Automatically Change Post Background Color’s on Refresh
• Automatically Change Background Color on Refresh in Blogger

So below is the image if you are able to see the image then just hover the mouse over it and you are going to see the second image automatically replaces the first one and this is the effect I'm talking about so we're just going to see how you can achieve this effect pretty easily using simple HTML coding and we won't be using any script so it's not going to hog up your website or Slow it Down, so you can use this HTML in any post or anywhere you want to achieve this effect.

Change Images on Mouse Hover in Blogger Blogs

So now lets jump in to the below tutorial and see how you can easily switch images on mouse hover and give a nice rollover effect.

1. Open Blogger > New Post, or any other post in which you need to add this awesome effect.
2. Now you need to copy the below code in your HTML section of the post and replace those links with image links.

   <img onmouseover="this.src='2nd-image-link.png'" onmouseout="this.src='1st-image-link.png'" style="display: inline" src="2nd-image-link.png">

3. So after you replace all the links above with your image you can publish your post and see this awesome effect.

---

That’s it this is the simplest way to achieve this rollover effect on images when you mouse hover on any one of them. I hope you enjoyed reading this tutorial, do comment below in case you face any problems getting this to work.