The real issue is if it's possible to do this using a fade

 

The image is black and I want to fade to white.

 

The image can be an SVG

Very simple solution done with CSS transitions

http://jsfiddle.net/Nillervision/dhf57/

It requires no JS but two versions of the image

EDIT: This works only with hover. If you want it to change with onclick you will need javascript (easiest way is to change className property with js and add the transition to the new class with css)

Edited June 17, 201412 yr by Nillervision

The best solution would be to use CSS of course. If you can't for whatever reason, there are jQuery solutions, here is one I found:

https://gist.github.com/paulirish/373253

CSS3 does this with its webkit transitions.

To keep it very simple to test this. Lets say you have a div id element named 'fade'. Or in your case you would have a background image on the div element to show one version of the image on hover that has been inverted from black to white.

 

<div id="fade"></div>

 

The CSS code:

 

#fade {
width:40px;
height:40px;
display:block;
background:#000;
}
#fade:hover {
background:#fff;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
}

 

Hope this helps.

Edited June 18, 201412 yr by allen180