Thanks for stopping by the porch! Stay in touch and never miss a post. *Follow on Facebook, HERE. *Follow on Google+, HERE. *Subscribe to receive an e-mail notice when a new post is up, HERE. *Subscribe to the BNOTP newsletter, Postcards from the Porch, HERE. Please note: All of the above are completely FREE! :)
Welcome to the 178th Metamorphosis Monday! How was your weekend? Mine was super productive. I had let a lot of things slide around here with all the preparations for the wedding and then the blog move, so today involved lots of basement cleaning, laundry, filing, organizing, plant watering, garage-light-bulb changing…you name it. It really felt good to get a few things done.
The weekend wasn’t all work, though. Yesterday, a friend treated me to an evening at The Shakespeare Tavern to see As You Like It. It was a late birthday present…late due to finding a time that worked for both our crazy schedules. If you live in the Atlanta area, you gotta check out the The Shakespeare Tavern on Peachtree Street. I called in advance to ask if I could take a few pics during the play to share with you but they said it was against the rules. (Picture below is from their website.) The tavern is a small, intimate theater and there really are no bad seats. The players interact with the audience…so much fun!
The best way to “do the tavern” is to arrive around 5:45 when the doors first open and have a glass of wine or a soda while you wait for the doors that lead into the actual theater/stage area to open. Once those open, stake out a good seat/table on the lower level, then head to the back for some of their Shakespearian fare. I had Shepherd’s Pie last night. Their bread basket is one of my faves, too. During intermission everyone heads back to the kitchen area once again to snag a serving of their popular Hot Apple Crisp with ice cream…soooo good! You can check out the menu on their site, as well as their upcoming schedule. I hope they never go out of business, I would so miss their performances if they did.
Metamorphosis Monday:
For this Met Monday, I thought I’d share a neat little photo trick I learned to do recently. This metamorphosis will probably interest Bloggers primarily, although non-bloggers may enjoy learning this little secret, too. Wish I had known how to do this long ago. It definitely would have come in handy for past “Before and Afters” I’ve shared. What am I talking about? I’m talking about that neat little effect called the “mouse-over.” Have you heard of it? I bet you’ve seen it occasionally on other blogs.
The “mouse-over” (in case you aren’t familiar) is that magical effect where a picture switches between two different scenes when you run your cursor over the picture. It’s a super way to showcase a “Before and After” of any project or room renovation/makeover. It’s probably easier to show what a “mouse-over” is than to try to explain it.
If you’ve been reading BNOTP over the past year, you’ll remember this room. This was how my current home office looked prior to its renovation into an office/craft room/sewing room. It had stripe “baseball themed” wallpaper, cream-colored carpet, a mural, ceiling fan and lots of bedroom furniture. This was my son’s old bedroom.
Here’s how it looks today. Painted walls, hardwood flooring, office furniture and a tole chandelier in lieu of the ceiling fan. Wouldn’t it be fun if you could just move your cursor over the photo of this finished room and watch it instantly turn back into a bedroom and then back into the office? Scroll on down (past this photo) to the next photo and check it out.
Run your cursor back and forth (on and off) the photo below and watch what happens. (If you are reading this via RSS or e-mail, you may need to visit the BNOTP Blog Site HERE to see the effect in action.)
Pretty cool, huh? That’s called a mouse-over. For today we can pretend we’re Samantha (Bewitched) and wiggle our collective noses. Presto/chango, we have a new room in the blink of an eye. Sure wish it was that easy to really renovate. HA! Naaah…that would take all the fun out of the decorating/design process. I definitely wish I could have done a mouse-over with the wallpaper removal process, though! (View full office renovation in this post: Pottery Barn Office Renovation, The Journey)
Here are a few more examples, just for fun. This past January, just after Christmas, I decided it was time to de-faux the family room. The fake foilage on top of the armoire and the faux tree in the corner were beginning to feel really tired.
Mouseover over the room below to see how the family room looked before I removed the plant on top of the armoire and the tree in the corner of the room. This isn’t the greatest example since I took the pic right after Christmas and the tree was still up, but I think you’ll get the idea. (View this full post here: Reforming my Faux Ways)
One more and then I’ll share how you can do this with your pictures.
Run your mouse over the picture below to see the porch during construction and now, in its finished state. Yup, hard to believe it once looked like the before picture. (View Before and After pics of porch in this post: Building a Screened-in Porch)
How to create the “mouse-over” effect with your pictures:
I had some good feedback on the tutorial I created for making a blog button with grab code, HERE, so I decided to write this tutorial basically the same way. By the way, if you were one of the dearhearts who “Google +1″ the blog button tutorial, thank you for that! Unfortunately, when I moved BNOTP from Blogger to WordPress two weeks ago, all the FB/Twitter shares and +1′s were reset to zero on every single post here at BNOTP. :(
So feel free to share and/or Google +1 this post or the Blog button post if you find them to be helpful. Thank-you in advance! :)
Okay, here goes:
Step 1:
There are two things you need prior to creating your mouse-over:
1. Two separate pictures (a Before and an After) of a scene/room or project, taken as closely from the same angle or position as possible
2. A place to “host” or store those two images
Let’s use as our example my office picture…it’s probably the better example of those I’ve shared in this post because both pics were taken at almost the exact same position. When you take your Before photo, if you think there’s a chance you’ll want to create a mouse-over pic later of the Before and After, pay special attention to where you’re standing when you take the photo. Then when you are ready to take the After photo, take a look once more at the Before pic and try to duplicate the angle/view as best you can. You’ll want to take both pics about the same distance from the subject, at the same height and preferably in similar lighting conditions. (Mouse over pic below for comparison)
Step 2:
Hosting the photos:
The Before and After photo will need to be hosted some place, just as the photos you post on your blog are hosted with Picassa (if you blog on Blogger) or with WordPress if you blog on WordPress. (I’m guessing that’s where most folks host the pics they use on their blog.)
(BTW, this has nothing to do with this tutorial, but is good info to know. If you ever move your blog from Blogger to WordPress, DO NOT delete your pictures in Picasa or from your old blog, Even though your new blog is a WordPress blog, the pics in all your old posts are STILL being hosted in Picasa and they’ll vanish from your WordPress blog if you delete them from your old blog or from Picasa.)
Now here’s where my tutorial may differ a bit from some of the mouse-0ver tutorials you’ve seen around Blogland. You can host your pics on Flickr, Photobucket or Picasa…wherever you choose. I decided to host mine on my old Blogger blog, which makes them end up being hosted in Picasa. I’m still able to access the dashboard of that blog so I uploaded the pics to a draft post I have created there just for the purpose of storing photos I use for blog buttons, party buttons and now mouse-over pics. I know you can store them directly in Picasa, but it’s so easy to just put them in a draft post, that’s the way I’ve always done it. Plus, I can easily find them if I need to later.
For WordPress blogs:
If you blog on WordPress, I’m not sure that will work…loading the Before and After pics to a draft post in WordPress to host them. The reason I say that is because I tried it and couldn’t get it to work for me. I created a draft post in my BNOTP WordPress blog, uploaded the two pics (Before and After) of the office to the draft post and saved the post, but I was never able to get the mouse-over to work. So I went back to the draft post I have saved on the old BNOTP Blogger blog and uploaded them to that draft post, saved them there and the mouseover worked great.
So, all this is to say, if you blog on WordPress and don’t have an old Blogger blog you can access or a “test” blog you created at Blogger, you’ll probably need to host your Before and After photos on Flickr or Photobucket.
Step 3:
Once you have your Before and After pics uploaded to a draft post in Blogger or to Photobucket or Flickr, copy the following code below to a word document. You’re going to be making some changes to the code, so copying and pasting it to a word document just gives you a place to work on it.
(You could copy and paste the code below to the post where you’ll be showing the photo, but I found it easier to work with it in a word document. This code was a bit tricky to work with because in several places there’s an apostrophe AND quotation marks all crammed up together. I found it almost impossible to see them clearly. I found it much easier to see and work with the code in a word document than in a draft post. Please do what works best for you.)
So, copy and paste the following to a word document: Please note: wordpress turns the quotation marks backwards whenever I copy and paste code into a post…so the quotation marks below are going backwards. You’ll have change them to face the normal way when you create your mouseover code. I have a screenshot further down in this post to show how your code should look.
<center><img onmouseover=”this.src=’before_photo_picture_here.jpg’” onmouseout=”this.src=’after_photo_picture_here.jpg’” src=”before_photo_here.jpg” alt=”" /></center>
Okay, let’s move on to the next step.
Step 4:
Once you have the code above copied to a word document, replace the BEFORE picture code (in both places) with the code that represents your BEFORE picture. Replace the AFTER picture code in the center with the code that represents your AFTER picture.
How do you get that code?
If you’ve stored/uploaded your Before and After pictures to a draft post in Blogger, follow these steps below. If you’ve stored your Before and After photo in Photobucket or Flickr, scroll on down for those directions.
Directions if your Before and After pics are stored in Blogger draft post:
Now just copy the code you’ve created to the html view of your post. Don’t forget to save it. You don’t want to lose your hard work. When you flip over to the “Visual” view of your post, you should see the mouse-over effect occur when you mouse over your picture.
Be sure to save your code before flipping over to the visual/compose side of your post. WordPress is weird and may goof up your code if you don’t.
Directions if your Before and After pictures are stored in Photobucket or Flickr:
If you uploaded/stored your Before and After pics to Photobucket, the image code you’ll need for your pics will be the one in the “direct link” box. As you scroll over your BEFORE photo in Photobucket, a box will pop up showing the direct link code as shown below. Copy that code and BEFORE code in the two places you saw in my example higher up in this post.
You’ll do the same thing for your AFTER picture except you’ll paste the direct link for the AFTER pic where you see the AFTER code in my example code.
Now just copy the code you’ve created to the html view of your post. Don’t forget to save it. When you flip over to the “Visual” view of your post, you should see the mouse-over effect occur when you mouse over your picture.
Important: Try to avoid accidentally deleting any marks or code when you are pasting in your picture code. Code is pretty unforgiving. If you accidentally delete a quotation or apostrophe, your mouse-over code will not work. No big deal if that happens, though. Just copy and paste my example code over and try it again. You’ll get it!
I’ve used Photobucket over the years but I’ve never really used Flickr. So, I’m not exactly sure where you’ll find the “direct” link code in Flickr. If you regularly use Flickr, you probably know where to look for that. I would imagine it could be called “direct code” on Flickr, too.
Here’s an actual screen shot of the code for one of my mouse over pics. It may be helpful to compare your code to mine once you have your code in place.
That’s it! You’re done! Congrats on creating your first mouse-over pic!
If you found this tutorial helpful, would so love it if you would give it a +1 in Google.
Have fun creating your mouse-over pics! 
Pssst: I’ve added a few more links to each of the four categories (Summer Decor, Summer Dining, Porch Fever, Patriotic Celebrations) at the bottom of the blog.
Receive BNOTP updates right in your Inbox:
To receive the latest posts, as well as updates about upcoming blog parties, subscribe To BNOTP posts via an RSS Reader. Or, have BNOTP delivered right to your Inbox. You’ll find links to subscribe via RSS and e-mail on the right side at the top of this blog.
Reading this post via e-mail or RSS feed?
*If you are reading this via email or RSS feed, to view all the Before and Afters linked for Metamorphosis Monday, click HERE.
Metamorphosis Monday:
If you are participating in Metamorphosis Monday you will need to link up the “permalink” to your MM post and not your general blog address. To get your permalink, click on your post name, then just copy and paste the address that shows up in the address bar at the top of your blog, into the “url” box for InLinkz.
In order to link up, you’ll need to include a link in your MM post back to the party.
If you’d like to include the MM button in your post, just copy and paste the Met Monday button to your computer and unload it as you do your other photos to your post.
PLEASE DO NOT type in all caps…it spreads the links waaaay out. Thanks!
Let’s try something fun today! Please visit the person who linked before you and after you…that way everyone will get some visits. Hope you’ll visit more, of course.
Welcome! Thanks for coming to the party!
I always wondered how to do a the mouse over trick for a picture. Thanks for telling us how to do it.
I’ve tried three times to link my post to the party with no success. I keep getting a message saying that my post doesn’t contain a backlink to you but it does. Can you help?
http://www.virginiasweetpea.com/2012/06/patriotic-bandana-wreath.html
So sorry Paula. I goofed somehow when I created the linky thing in the wee hours of the morning. I’m blaming lack of sleep. lol That sounds better than blaming me!
OMG!
Susan, you really are a magician!
Not only you have transformed your son’s old room into an amazing office/craft room, (what I had already seen and admired!) you now have found out how to create the “mouse over” effect with your pictures! I’ve never seen that before! And you always are kind enough to explain everything, step by step!
I only wish I were so talented with my laptop! What can I say? I am a little “disaster” with technology!LOL (That’s why I don’t blog myself!)
But I am happy I can enjoy your talent!
Thank you!
Hugs from Germany!
Cecilia
P.S. you see, I really read your blog daily!
Awww, thanks Cecilia! You are a sweetie!
I like the cursier moving thing, don’t know if I will add it however enjoy seeing it work
thanks for this Monday post
Thanks!
Susan,
BNOTP just keeps getting better and better. You have done a splendid job. Have a wonderful week.
Thanks, Lynn! Same to you! Gonna be a busy one for sure!
Thank you for hosting, Susan. And great tutorial, I’m pinning it for sure.
Thanks so much, Karah! ♥
Oh I’ve always wanted to learn this! Thanks for sharing it and I can’t wait to try it!
Danni, have fun! It’s easier than the tutorial probably makes it sound. I went into a lot of detail…so don’t let the long tutorial scare ya. You’ll love it!
Love this tutorial on the mouse over. There are so many things I would like to take the time to learn but don’t get around to looking up, so it’s great to have you showcase it. Thank you!
Liz
Liz, I know what you mean…I’m still trying to find time to learn Photoshop. One day, I keep saying!
Love the transformation from your sons room to an office. I am about to turn a “den” addition in the bungalow I just bought into a room for my son. Was wondering where you bought your hardwood floors from? I have a 1917 bungalow with original hardwood and the back room is tile. I want to keep with the history of the house and do hardwood flooring and want the narrow planks and do not want to do a pergo type of flooring. Love Love Love your blog! Susan
Hi Susan,
They are the 3/4 inchunfinished kind that can be refinished for years to come. I used A.L. Thomas here in Atlanta. He’s very reliable…been in business a long time. They installed them unfinished and finished them on site. I bet someone in your area will know where there are some salvaged floors from a tear down. It may take a bit of looking but I don’t blame you one bit for wanting to stay authentic to the style. That’s the right way to to do it, if you can…match to the existing floors. I think there are companies who can even duplicate flooring to match…probably a bit pricey, but worth it I would think.
Susan, I can’t get my link up – it keeps saying I don’t have a back link – but I’ve tried using your button, and I’ve tried using a text link – neither works. Tried 5 times. Help! Mary
So sorry Mary about the earlier confusion. Hope you were able to link up.
Hi Susan,
Thanks so much for that great tutorial on mouse-over’s … you always share such helpful and detailed information … I’m going to have to study this post
But much smaller things first … trying to post to the party & keep getting a “no backlinks in your post” message. Have both a link to the party and the party button. Any suggestions? Been a while since I posted to any party and I may just have a very rusty brain! Sorry to have to bother you.
Robin @ happilyhomeafter.blogspot.com
Robin, no bother at all. I goofed when I created the party. Thanks so much for letting me know the linky thing wasn’t working properly.
I’ve linked now, don’t know what happened earlier. I bought a chandelier from Craigslist and re-did it, very excited with the results for my shabby chic breakfast room! Thanks for hostessing the party. Hugs ~ Mary
Oh, Mary…that’s awesome!
It’s working now, thanks Susan!
I read the tutorial, its a good one, thanks for sharing it!
Also checking out your fabulous 4th of July tutorials…what fun!
Hugs,
Cindy
Thanks, Cindy! Sorry about the earlier confusion with linking up…I know that was frustrating!
Sorry everyone about the link up not working. I redid it and it should be working now. So sorry for the trouble.
Great tutorial, Susan! Once again you have worked out all the details for all of us! Thanks for hosting! Happy week!…hugs…Debbie
Thanks, Debbie!
Great tutorial. Thanks for hositng.
Thanks so much for the great tutorial on mouse over pictures. I had completely forgotten about this trick!
You have a beautiful home, Susan.I like how your office turned out, so bright and cheery!…Christine
Thanks for this tutorial Susan. I’m going to bookmark it so I can come back later to study!!!
What a fantastic tutorial – will be using this method for sure –
and many thanks for hosting as usual!
Hugs,
Suzan
Thanks for the tip… and thanks for hosting. Little Bit
Thanks Susan.. the linky is fixed and I posted.. I love this party and dont often have anything to show so when I do I get excited lol…
thanks again
Thanks for hosting!
Jeanine
Thanks for the tutorial- I’m sure I will be using it some day! I used your blog button tutorial, the only one that made sense to my poor brain. And thanks for hosting the party!
Thanks Sheila! I tried to write this tutorial in the same way so hopefully it will work, too.
Susan what a great tutorial! Thank you for sharing and for hosting!
Susan -
I always love your tutorials! I was doubting this one, though until I realized that, as blogs which you have subscribed to come into your mailbox, this won’t work. You have to click on the title to get all the way into the website for this to work. Also, I was just running my cursor back and forth over the photo, not OFF of the photo. Now I get it!!! Guess I’m just dim. Don’t you LOVE how far you’ve come with your lovely home?
Linda @ A Toile Tale
Linda, thanks for letting me know. I just put a note in the post letting folks know it only works when you visit the post. You are definitely not dim! Thanks for the reminder. I think we all tend to look at our “wish list” sometimes instead of celebrating what we have gotten done.
Susan, this is just too much fun! Love it! I am sure we’ll be seeing many more examples of this! I appreciate you sharing and hosting,
Kathy
Thanks, Kathy! If feels like magic, doesn’t it?
I’m going to come back and study this! I’ve always wanted to know how to mouse over
Thanks for hosting!
Debbie
ps. see you at Haven!
Yes, see you there!
That’s awesome Susan! Not sure I’m ready to tackle it quite yet, but it’s definitely getting bookmarked for when I’m brave enough to try it
.
Have you ever been to Paris on Ponce? I bet you have, but if not, you should check it out. Occasionally they have performances there, but you should go just to look at the fun stuff they have.
No, but thanks for telling me about it! Will have to check it out.
http://www.yelp.com/biz/paris-on-ponce-atlanta
You have to go!! (pssst…it would make a great post).
Thanks for the tutorial and thanks for hosting!
Thanks for letting me know to retry the link now, Susan! It worked fine this go round! : ) Thanks for hosting!
Excellent tutorial! Thanks for hosting
I have always wondered how to do this! Thank you so much for sharing this and hosting too
Hugs, Tanya
Hi Susan,
Thanks for the email update! Glad your party up and running.
Laura
Thank you Susan…that is so neat! I would love to do that with the post I just linked up with my before & after pictures of our kitchen, but I am hosted on Weebly and they don’t offer this as of yet. I am in love with your screened in porch…we want to try something like that as well! Thanks again, and have a great week!
~ Julie
Hi Susan,
Very helpful tutorial. Thank you
I couldn’t see the trick at first, because I use to read your new posts in my reader, but once I switched to your site, I was able to enjoy the magic.
Have a wonderful week,
S.
Thanks for letting me know. I just put a note in the post to let folks know about that.
Thanks Susan! I needed this trick…it will come in very handy. I’m pinning it too. I linked up my back deck transformation…this is a very thrifty spruce up. Enjoy your week!
Hi
Am I missing the “search button” in your new design? I wanted to see the post where you must have mentioned the darling new checked drapes in your craft room – but I couldn’t find a way to search on curtains or drapes. Thank you!
Karen
Thanks, Karen! The search button is at the very top of the sidebar now, part of the widget that shows how to subscribe, etc… Here’s a link to the curtain post, too: http://bit.ly/NKIAmk. Thanks so much for asking about the search button. I hope it isn’t too hidden away.
You are so sweet to do these tutorials. Thanks so much. XO, Pinky
Thank you for hosting and for sharing. I love your blog and the useful tips that you share – you are very talented. Have a great week – enjoy!!!
Susan,
Thank you for this how to.I need to re-read this and try this myself.Thank you for hosting.
(((((Hugs)))))
Anne
Thank you very much for the tutorial and also for hosting this beautiful party w/ so many summer projects shared!
Hi Susan,
Coul you contact me by email? I have some question regarding moving my blog to another blogspot blog and thought you could help. I want to bring over my followers etc. (not that I have as many as you but they all matter). I hope you have the time to explain to a beginner. Thank you very much, Lynne
As usual, your tutorial is clear, concise and detailed. I confess that it’s fear of lacking skills such as this that have kept me from blogging. Several people have urged me to blog, and maybe with the great help provided by you and others, I’ll gain the confidence to do it one of these days! Thanks for sharing.
Great tutorial! I wish I had seen this before I posted my guest bedroom reveal. I’m gonna have to try this next time!
That is way cool! I’m pinning it (as usual). You could still use a pin it button to encourage others to pin. I’ve just learned how to do it correctly. Can you tell I love it?! Have a great week!
Susan,
Love your tutorials, but am struggling with this one. It keeps coming up as a broken link. Has someone else been able to get it to work? You are always so detailed, and precise, so I must be missing something. I’ll keep trying, and hope to have one shot that metamophosizes! Thanks, CJ
CJ, I just added an actual “screen shot” of how the mouse over code should look since WordPress turns the quotation marks the wrong way when you publish a post with the code showing. Compare your code to the screen shot I just added to this post, to make sure you have all your marks in the right place.
Hope this helps.
Hi Susan, I love how the mouse over worked and was so excited to try it, but I am having some problems. I used photobucket to host my photos and I use wordpress for my website. I made sure all the quote marks were turned the right way (using your screen shot visual) and it just will not show a picture for me. I either get a small box with an x on it or I get 3 photos with codes on my visual. Any suggestions to what I am doing wrong? I even copied your code and edited the quotation marks and it didn’t work either.
I got it to work! yay!
I always wondered how that was done…..now thanks to you I do. The tutorial was easy to understand, took about 5 minutes to do. I have included a link back to this post in my “blog tips n tuts” page of my blog.
Thank you.
Have a great day.
Hi Susan! Great tutorial!
This technique will work once you publish the post, but just doesn’t work in preview mode. So, you should be able to just upload the images to your image gallery within your post and use the url from there! I tried it on my local computer and it’s works just fine.
I just realized something else…duh. If you are still in draft mode, instead of clicking the “preview” button to your right, look up to the top and click on “View Post”. Then it works!
Yay, glad that worked!
Awesome tutorial!!!
Another good reason to hang on to your blogger….is link backs to your wordpress. Just saying! =]
Thank you!!!