In simple explanation, there are two images and one image is visible which is the default/original and the second image is hidden which will be shown when the mouse cursor is hovering the original image and the original image will be hidden. Rollover image is preloaded into the page when it is loading, to ensure that the rollovers are displayed quickly.
How To Add Roller/Hover Effects On Blogger
You can also add it inside your post or in page by going to NEW POST or NEW PAGE > switch to HTML tab and then paste the code.
Now copy the code below and paste on any place listed above you wish to have it:
<a href=”URL ADDRESS”><img src=”URL OF THE FIRST IMAGE GOES HERE”
onmouseover=”this.src=’URL OF THE SECOND IMAGE GOES HERE‘”
onmouseout=”this.src=’URL OF THE FIRST IMAGE GOES HERE‘” /></a>
How to Edit The Code?
1. URL ADDRESS
This is the address where somebody will be sent after clicking the image.
Example of URL ADDRESS: https://www.bloggingseries.com/
2. URL OF THE FIRST IMAGE GOES HERE
Replace that text “two times” (the 1st line of code and 2nd line of code) with the URL address of the image which will appear before you hover over it.
3. URL OF THE SECOND IMAGE GOES HERE
Replace the text with the URL address of the image that will appear when the cursor hovers over it.
Hope it worked for you!