CSSフィルターによるシンプルなホバーエフェクト

WebKitのみですが、なかなか良さげな画像エフェクト。

span

Simple hover effects with CSS(webkit) filters
元ページは画像だけにエフェクトかけてますが、上の通り、divでも問題なく適用できます。

<style type="text/css">
.grayscale {-webkit-filter: grayscale(100%);-webkit-transition: all 0.5s;}
.grayscale:hover {
	-webkit-filter: none; /*Returns to default state*/
}
</style>
<div class="grayscale">
    <img src="http://www.st-hatena.com/users/ze/zebevogue/user.jpg?1244021988" />
    <span style="color: red">span</span>
</div>

IEの場合はfilter: gray/noneで適用できるみたいです。transitionの時間指定は調べてないです。
他のフィルターもリンク元にあります。