Adding a hover effect to your blog photos is fun and easy way to add interest to your blog posts or sidebar images. Rollover effects are a great way to showcase before and after photos or to surprise your readers with a fun message when they hover over a photo. To see how the the rollover effect works, hover your mouse over the pink glasses right here:
So fun. Here’s how to create this effect…
STEP 1: CREATE TWO PHOTOS
The main image photo is the one people will see first when they view your blog. The hover photo is the photo they will see when they roll over the photo with their mouse. When the mouse is removed from the photo, the photo will return to the original photo.
NOTE: If you are using before and after photos of a room or project, make sure you are standing in the exact same spot or using the exact same angle when you take both photos for the best hover effect.
STEP 2: CREATE URL’S FOR EACH PHOTO
Each photo will need to be converted to a URL in order to be used in the coding that will create the hover effect. Instructions for how to do this in both WordPress and Blogger are shown below.
To Create a URL in WordPress
In your dashboard, find your media library and upload each photo to it. Then click to Edit each image. Copy the URL from the URL box and save each URL somewhere so you have them handy for the next step.
To Create a URL in Blogger
Create a new post and upload each photo. Click on each photo and make sure they are set to “Original size.”
Now switch to the HTML view of the post. You’ll see a bunch of coding. The first block of coding is for your first image, the second block of coding is for your second image. The URL for your images are going to start with “https” or “http” and are going to end in either “png” or “jpg”. Do not copy the quotation marks before and after the code. You’ll need to find and copy each image URL and then save those URL’s somewhere so you have them handy for the next step.
Then save the post. IMPORTANT: you’ll need to keep this post saved as a draft forever and never delete it or your images will be deleted as well.
STEP 3: ADD ROLLOVER EFFECT CODING
<img src="URL OF THE MAIN IMAGE GOES HERE" onmouseover="this.src='URL OF THE HOVER IMAGE GOES HERE'" onmouseout="this.src='URL OF THE MAIN IMAGE GOES HERE'" />
Replace URL OF THE MAIN IMAGE GOES HERE with the image URL for the first main image (there are 2 locations in the code where this needs to be placed)
Replace URL OF THE HOVER IMAGE GOES HERE with the image URL for the second hover image
IMPORTANT: Be sure not to move or delete any of the quotation marks or apostrophes or the mouse over effect will not work. Also, be sure to publish your post in the HTML/Text mode for the effect to work properly.
Now Michelle’s cute about photo looks like this (be sure to hover):
I only chose to change the photo by adding text, but think about how cute it would be if her facial expression changed in the second photo as well. There are seriously so many creative ways you can use the hover effect! If you’ve used it, we’d love for you to share in the comments the link to a post you’ve used it on so we can check it out!