Last Updated on December 28, 2015 by Kristi Linauer
I think this is my first-ever “blogging help” post, but I keep getting questions about how I do the mouseover “quick view” before and after pictures, like the one below.
Move your pointer back and forth over the picture to see how it changes from the “after” picture to the “before” picture, and then back again.
The first thing you’ll need to do is size your before and after images the same size.
I use my Paintshop Pro program to resize the photos, and I always resize my horizontal photos to 550px wide and my vertical photos to 550px high. But you can use any photo editing program, and size them any size you want, as long as the two pictures are the same size.
Once you have both the before and the after picture the same size, you’ll need to upload these photos to a photo sharing site, such as Flickr, Photobucket, etc.
Now copy and paste the following code into the HTML of your blog post where you want the before and after quick view to show.
<center><img onmouseout=”this.src=’http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01a.jpg'” onmouseover=”this.src=’http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01.jpg'” src=”http://kristilinauerinteriors.com/a2d-pics/julia-kitchen-01a.jpg” /></center>
Now simply replace the location of my photos with the location of your own photos. In other words, where the code shows:
Replace that with the location of your AFTER picture. This goes in two different places. Be sure that you’re replacing it with a similar location that ends with .jpg, .gif, .png, or another photo format. If you enter a .html address, it will not work. It must be the actual photo.
And where the code shows:
Replace that with the location of your BEFORE picture.
Be VERY SURE that when you’re pasting in the locations of your own photos, that you DO NOT accidently erase any of the single or double quotation marks. If just one of those goes missing, the code will not work.
And that’s the trick! If you have several before and after quick views you’d like to add to one blog post, just copy and paste the code into your blog post HTML as many times as you need.
Hope that helps!!
Addicted 2 Decorating is where I share my DIY and decorating journey as I remodel and decorate the 1948 fixer upper that my husband, Matt, and I bought in 2013. Matt has M.S. and is unable to do physical work, so I do the majority of the work on the house by myself. You can learn more about me here.
I hope you’ll join me on my DIY and decorating journey! If you want to follow my projects and progress, you can subscribe below and have each new post delivered to your email inbox. That way you’ll never miss a thing!