IMG Mouseover Plugin For WordPress

April 3, 2011 by  

muslim woman fancy eye makeup

Mouseover Photo Above For Black & White Version

        While editing photos, I may end up with a few different versions of the same photo. Trying to decide which version I will present to the world can be difficult. There is a plugin for WordPress called IMG Mouseover that helps make this choice a little easier. It allows two photos to occupy the same space on a page, changing from one to the other when the viewer hovers their mouse over the image. If you mouseover the image above, it will switch to a black & white version. This is a very clever way to show more photos with less space but you will want to make sure to include some text or a caption so your viewers will know they need to mouseover images to see something else. Back in February, San Diego had a “King Tide” event so I was able to use the IMG Mouseover plugin to show the difference between high & low water marks. Being able to switch between two photos really helps to make a point and tell the story. That post, with photos that show the difference in San Diego Bay’s tides can be seen here.

Comments

Leave a Reply

4 Responses to “IMG Mouseover Plugin For WordPress”

  1. allfothemes on April 19th, 2013 1:41 am

    Thanks u for article! i was searching this long time ago

  2. Tuan Vo on June 20th, 2013 3:48 am

    Thank you, is there anyway to display caption text when we're hover image? (not switch to another image)

  3. Enmanuel Corvo on March 5th, 2014 6:33 pm

    WP Visual Slide-Box Builder, is a plugin that easily allows you to create an image hover effect. It comes packed with built in effects that make it really easy to use.

  4. Tony on April 25th, 2014 3:21 am

    Thank you for having the example here. I was able to find mention of this plugin but without an example of how to format the IMG tags it was a mess and I could not get it to work.

    But since you had a working example of this plugin here on this page I was able to use a developers tool and peek at the page code to see how you did it.

    Woot!

    The format was too easy! In case anyone else is looking for this… here is the format for the tag:

Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!