About   All Tips   Tips by Category   Tips by Ability   Help!

Before/After Mouseover Photos - Advanced

If you like to show before and after photos on your blog, you're going to LOVE this tip!

Take a look at the above photo of me and my husband on our wedding day. Wait a few seconds and then move your mouse over it. Roll over it and off of it really fast to see a head butt effect. Cool!

Want this feature for your posts? It requires that you add code to the html of your template, which makes this an advanced tip. I highly recommend trying this on a practice/test blog first. Be sure to download a copy of your current template before putting the code on your real blog.

I wish I could say that I came up with this awesome feature, but I did not. You'll have to head over to Tips for Bloggers for the codes that you'll need to put in your template. I'll tell you when. :)

How to put before and after photos in your posts:

1. Upload the two photos that you'd like to use to Photobucket. I recommend using photos that are the same size and orientation (vertical or horizontal). Make sure that the size of the photos do not exceed the width of your post section.

2. Click here to view to the tip by Vin over at Tips for Bloggers in a new window. Copy the code in the first gray box.

3. Open your template (be safe and use a practice blog first). Scroll down to the very bottom and paste the code immediately before </body>. Save.

4. Create a new post or open an existing one.

5. Click on 'edit html'.

6. Click here to go back to the tip by Tips for Bloggers. Scroll all the way down to UPDATE and copy the code in this section. Paste it in the html of your post.

7. Replace DIRECT_LINK_IMAGE_1 and DIRECT_LINK_IMAGE_2 with the direct links for your images on Photobucket. The first image will be displayed on top when you publish your post. Add <center> before the code and </center> after the code to center the photos.

8. Enjoy your mouseover/before and after photos!

A couple of things:

*Your blog must fully load before others will be able to see the hidden photo.

*Not a fan of Photobucket? Go to Vin's tip and follow the original instructions (not the update) to use photos uploaded via the Blogger uploading tool. I tried this once and was unsuccessful. The PB way worked for me the very first time. If you choose to forgo PB and get stuck, scroll down to the bottom of Vin's tip and read through his comments section.

Related Posts:
Put A Border Around Your Photos
Protect Your Photos
Get A Practice Blog

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)