timthumb now supports image filters... inluding (drumroll) a grayscale filter.
totally server-side and timthumb has seen a lot of speed improvements with its caching... so the images are not re-created every time.
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" />
then you could spit out the image again w/o the filter... so that you have 1 color and 1 gray scale.... absolutely position the one on top of the other and use jquery to animate opacity on hover. i don't like the double markup, but doing everything on the fly (i tried using pixastic) on multiple images just dragged my load time way down.
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200&f=2" class="grayscale"/>
<img src="url-to-tim-thumb.php?src=url-to-image.png&w=200&h=200" class="color"/>
i found i had to use timthumb on both to ensure they'd be exactly the same size... and prevent any random pixel rounding errors.
in the loop you can get the featured image's info w/ some of the following:
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($image_id,’large’, true);
$alttext = get_post_meta( $image_id, '_wp_attachment_image_alt', true); ?>
$src = $image;
$width = $image;
$height = $image;