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).
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:
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.
As above, only use a different class for the outside div. For example:
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.