Grayscale filter to multiple images on site. On hover, fade to original colour image

General information for the website: Portfolio Site
Kind of development: Customization of existing website
Num. of web pages/modules: N/A
Description of every page/module: N/A
Description of requirements/features: Hi there,

I'm currently building this site:

scottwaldon.edeharrison.com

I want to implement the following effect on all images:

> All images have grayscale filter applied to them initially
> On hover, the images fade to their original, colour state
> Release hover, images fade back to grayscale

I've been through a few methods to try and get it working. Main issue is cross-browser compatibility; can't get it to work in blasted IE. It's important that it does work in at least all commonly used browsers.

I don't have enough time to keep trying things so I'm looking for someone who can come up with a solution. Don't mind if you incorporate jQuery/JavaScript, or make it pure CSS.

If you need to ask me any questions, fire away.

Cheers,

Ede
Extra notes: