Diagonal Hover by css or Jquery

[k and o]

I want to make a certain image when the mouse comes on it it changes to another image; this is easy with css by making a link, and this link acts as the part at which the images change, no problem when making square hover.But I want to make a hover on a diagonal image, how do I do this?For Example this image :- When the mouse hover on Link 1 the image turns to a white image and for example.