Blogger

Create A Rollover And Hover Image Effect On Blogger

 The rollover image effect is mostly used in a website or even in blogger designing. So how this effect works? When the mouse cursor hover the default image, that image will change  to a new image (called rollover) and reverts back to the original image on mouse out (not hovering).

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
Note: You can paste your image with roll over effect inside the blog gadget going to LAYOUT > click on ADD A GADGET > and select HTML/JAVASCRIPT. Paste the code inside the content of the popup window.

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/

Check Out:  How To Add Related Posts Widget On A Blogger Blog

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!

About the author

Alvin Uchenna

A Passionate Blogger With A Keen Eye In Helping People To Develop, Design And Monetize Their Blogs.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: