1. Simple change
If you have the Custom Design upgrade, then it’s easy to create an image that changes into a different image (or a different version of the same image) when you hover over it. All it takes is a bit of coding in the CSS editor and a bit of extra coding in the so-called “Text” post or page editor (or in a Text widget).
CSS editor
Paste this:
Post or page editor
A. Plain images
Upload the images from your computer and insert them the normal way, setting the “Link to” option to None. [*] Make sure the second image code shows right after the first one, with no space or line break or paragraph break between them. Add “regular” to the class attribute of the one image, add “rollover” to the class attribute of the other image. Then enclose the pair of image codes in a pair of div tags this way:
[*] If you want to make the rollover image clickable (i.e. make it link to some URL), set the “Link to” option to Custom URL and paste the URL in the respective field before inserting the image. In that case the complete code will be like this:
B. Captioned images
As above, only the editor doesn’t display the actual code of the complete object (image plus caption plus frame around them), it displays a shortcode; so instead of adding the required classes to the two image codes you have to enclose each shortcode in a div pair with the required class:
</div>
C. Other content
The same technique can be used to make any block of content change when you hover over it. For example:
REGULAR PARAGRAPH HERE
ROLLOVER PARAGRAPH HERE
2. Gradual change (crossfade)
Often it’s more elegant to make the change gradual. Perfectly possible, only it requires different CSS.
Note: this doesn’t work in IE9 or earlier.
Post editor
As above, only use a different class for the outside div. For example:
CSS editor
Change the number in the transition properties to adjust the duration of the transition.
The value “ease-in” means speed up; replace with “linear”, for uniform speed.
________________________
For live examples see this demo post. [Sorry, upgrade on that blog has expired]
PS: Some rollover effects are also possible without the upgrade, but you have to be very experienced in coding; you can see an example at the end of my post Spoiler/hover content.
wordpress tips 
Thank you for this, I’ve been wondering for ages if it was possible without editing the CSS. Your site is really helpful!
Posted by Mythos | May 21, 2013, 14:43You’re welcome. As I’m showing in the post I link to at the end, I can also do it without editing the CSS of the theme, but I cannot post a solution, since each different theme would require different coding in the Text editor (and a ton of coding at that).
Posted by Panos | May 21, 2013, 15:09I have got to get that Custom Design upgrade Panos!
Posted by IzaakMak | May 22, 2013, 00:36I remember we had talked about this in the other post. Yup, if you’re interested in such tricks you need the upgrade.
Posted by Panos | May 22, 2013, 13:16Sorry, don’t know where else to ask. Theme Misty Lake. My admin page change (including some area of white to black). I find it harder to read. Is there a way to change back to the previous coloring? Thanks.
Posted by Skub [skhoo:b] | June 18, 2013, 08:43Thanks Panos, I’ve been looking for this answer for a while. Haven’t purchased the css upgrade because I know very little about css and didn’t want to waste time and $ if it couldn’t be done – which many of the volunteers over at wordpress say is the case. Can I do this but also make the image a clickable link? That’s really what I’m after.
Posted by deborahwaltman | June 29, 2013, 00:01You’re welcome.
Of course you can make the image a clickable link: I updated section A accordingly, and added an example in the demo post I link to.
Who are the “many of the volunteers over at wordpress” that say it couldn’t be done?
Posted by Panos | June 29, 2013, 22:16Thank you so much for replying. When I started at building my blog a few months ago I searched the forums A LOT to find out if this could be done and found a lot of straightforward “No, it isn’t posible”..no time to find them all again…but here’s one I remember seeing. Not even a volunteer, she’s labelled as ‘staff’….makes things awfully confusing for us newbies http://en.forums.wordpress.com/topic/html-mouse-over-in-free-wp?replies=2#post-1227295.
Once I buy the upgrade and start tweaking I may call on you for some help again!
Posted by deborahwaltman | June 30, 2013, 18:50Very helpful post. I could use it so well. Thanks.
Posted by eventmanagement58 | June 30, 2013, 20:12@EM58:
You’re welcome!
@DW:
Staff often give stock replies, and sometimes they reply hastily, without giving much thought to the question. If you take things very literally, the reply you linked to is correct: “mouseover” is javascript, and we aren’t allowed to use javascript on wordpress.com. But the reply should have continued with: if you have the Custom upgrade, etc etc…
To demonstrate, here’s a couple of other effects I worked out (I haven’t published the relevant posts yet):
http://panosdemos.wordpress.com/2013/06/30/zooming-images/
http://panosdemos.wordpress.com/2013/05/26/mouseover-overlay-lightbox-style/
If you buy the upgrade, you can post your questions in the wordpress.com CSS forum. Users who have the upgrade are entitled to staff support, so your questions will be answered by the staff member responsible for (and expert in) the job – or sometimes by volunteers, myself included.
Posted by Panos | June 30, 2013, 20:46This is awesome and I mostly have it working on my site. I am having one issue however: when the mouse hovers over the image and the rollover image appears, it seems to push or move the following line by one space.If you click on this link to my site you can see what I am talking about: http://jesuitspiritualcenter.wordpress.com/accomodations/
When you rollover the images on the right side it bumps the following line. Is there a fix for this?
Posted by Eric Nichols | July 2, 2013, 22:46I’m not seeing the issue in any of the browsers I’m using. What browser and version are you using? Is my demo post working ok for you?
Posted by Panos | July 3, 2013, 03:24Sorry! I posted the question in another forum and found the answer (forgot to amend my post here!). Turns out I needed to add the following after each set:
That seemed to clear this issue up.
Posted by Eric Nichols | July 3, 2013, 15:44*/
Posted by Eric Nichols | July 3, 2013, 15:45You mean this:
<div style="clear:both;"></div>
Comments are like the Text editor: you can’t display code just by pasting it. See my comment guidelines.
Anyway, you add this div in the Text editor to stop the wrap-around effect of any previous left- and/or right-aligned content (although when you have the upgrade you can take care of this in the CSS editor).
In the meantime I thought that in cases like your page a gradual instead of an abrupt change would be more elegant. Check the examples I just added to the demo post:
http://panosdemos.wordpress.com/2013/05/25/rollover-images/
I’ll update this post to add the CSS for this effect.
Posted by Panos | July 4, 2013, 14:12Awesome, I checked it out and it looks beautiful. Here’s a question for you. I thought it would be neat to have a map of my organization’s facility where clicking on different buildings would take you to pages about those buildings. I know you can create an area map as demonstrated here: http://panosdemos.wordpress.com/2012/05/23/image-mapping-example/.
I am wondering, is there any way to have several different rollover images depending on where your mouse fell in the area map? If so, I could use this to “highlight” each building when the mouse hovered over it.
Posted by Eric Nichols | July 8, 2013, 21:55Oh, great idea!
Yes, of course it’s possible – here you are:
http://panosdemos.wordpress.com/2013/07/02/rollover-mapping/
You don’t mind if I publish a post about this, do you?
Posted by Panos | July 8, 2013, 23:00This is great! And definitely post this – I love spreading good ideas – especially when they work!
Posted by Eric Nichols | July 9, 2013, 00:29Thanks – I’ll give you due credit of course!
I don’t know when I’ll have the time to prepare the post and create a more interesting demo,* so if you don’t want to wait here’s the code I used:
http://textsnip.com/ua4jdc
* Or if you create yours before I do mine, it might be a nicer credit if I used your page instead of mine as a live example.
Posted by Panos | July 10, 2013, 03:41I made a quick proof of concept to show my coworker who is helping me build this new site for our organization. It’s a little rough but it gets the idea across. Here is the link: http://jesuitspiritualcenter.wordpress.com/accomodations/
Posted by Eric Nichols | July 10, 2013, 18:11This post helped me a lot. Thanks for sharing.
Posted by Anurag Aggarwal Institute of Public Speaking | July 12, 2013, 17:24Hi panos,
I found your blog after a long search. I search for “how to add rollover images in wordpress’. And i success on implement your code in my blog and i’m using selfhosted wp.
I found this tuts in my search-journey, can you take a look, please?
http://designshack.net/articles/css/downloadbutton/
Can we implement above code on wordpress .com/selfhosted? I tried and failed. When i was adding the CSS part, div “button”, and implemented in my post/page, nothing happened. I know that tuts for HTML pages. Can you give me a clue on how to do that on WP?
Thanks.
Posted by Afiff Aulia | July 20, 2013, 10:38Hi,
But sorry, my blog is about wordpress.com blogs: I don’t help with self-hosted blogs.
Posted by Panos | July 22, 2013, 15:40I was able to get the rollover to work but am having the same problem as Eric where it moves the image down a line when hovering. I tried to clear both div and it didn’t seem to do anything. Any tips?
Posted by Stacey Ingram | August 26, 2013, 22:52Nevermind, got it to work. :)
Posted by Stacey Ingram | August 27, 2013, 00:14Thank you so much! I’ve been wanting to know how to do this forever, but am a code novice. This is so helpful.
Posted by Linny Milliron | September 27, 2013, 09:11Hi I wish to make an image appear at the end of a paragraph.
And clickable to bring me to another webpage.
This code helps me on appearing.
How to make it clickable? Please help. Thanks!
.lastParagraphInSection:after {
content: url(“image.gif”);
}
Posted by Vincent Chua | October 13, 2013, 09:08CSS editing can’t create links: it can only manipulate existing ones. You need to insert the image into the post the normal way.
Posted by Panos | October 14, 2013, 18:51Hi
This works great. Is there a way to change onhover to onclick so the image only swaps when clicked and then swaps back when clicked again
Thanks in advance
Posted by Matt Crook | November 8, 2013, 14:39Assuming you’re talking about a wordpress.com blog, then no: it would require types of code we’re not allowed to use.
Posted by Panos | November 8, 2013, 15:23Another question… I have used article 1C to change a paragraph of text. Is there a way to make only one word within the first paragraph be hoverable to activate the change. I want one paragraph to have info and then a ‘more info’ link to show the new paragraph over the top. This can be either a rollover or click
Posted by Matt Crook | November 8, 2013, 15:28I’m not sure what you mean by “over the top”. Check this post of mine first, to see if it’s close to what you’re looking for:
https://wpbtips.wordpress.com/2013/03/16/spoiler-hover-content/
(And link to the blog in question please.)
Posted by Panos | November 8, 2013, 17:29Thanks for that. I’m building a website via wordpress.org. Stumbled on this post trying to work it out and has given me the best results. Can onclick be used if I am building the site with a template etc. It is not a blog,
Also, the spoiler is great. Was just hoping I could have used something similar to 1C
i.e.
sdkufh dshksh sj sfkgjhskgh fdjdf hjdgkh dkdskfs dhkfjsdfsd hfsdk more info
when someone hovers over ‘more info’ it would hide that paragraph and show another one.
Exactly the same as how 1C works but with a specific word used to trigger the swap rather than the entire paragraph/section
Thanks again for your help.
Posted by Matt Crook | November 8, 2013, 19:14That’s possible (see the two examples at the bottom of the post I linked to: I could tweak it so that the popup text or image shows where you want it). However a) it’s a bit complicated, b) I don’t agree that a more-info paragraph should cover or replace the paragraph it expands on, c) since you have a self-hosted site you’ve got more/better options (including clicking instead of hovering), with which I’m not familiar. So I suggest you forget me and ask at the wordpress.org forum.
Posted by Panos | November 9, 2013, 09:30You’re a life saver and made my CSS upgrade worth it!
Posted by Craft Beer Compass | November 12, 2013, 00:00Works great for one button.. How can you make this work for more than one ‘crossfade’ buttons on the same page?
Posted by Creativjoos (@Creativjoos) | December 3, 2013, 22:37my buttons seem to be getting confused.. (see social sharing buttons at the bottom of page) http://creativjoos.com
Posted by Creativjoos (@Creativjoos) | December 3, 2013, 22:40Dear Panos, Used your code badly – I’m rubbish at this stuff – but thanks for your tips and here is the first part of my advent calendar. Thanks K
http://dougiescott.com/2013/12/04/bauble-box-advent-calendar-2013/
Posted by Kath Scott | December 4, 2013, 20:40@CBC: You’re welcome!
@CJ: Sorry, see point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
@KS: You’re welcome. Your images seem to be working as expected, so I don’t see why you say you used my code badly!
Posted by Panos | December 4, 2013, 20:46