サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/tqDKv
CSS3はフィルターで画像の色を制御できます。
CSS
filter: grayscale(100%);
グレースケールを100%適用するという意味で、100%に近いほどグレースケールの度合いが強まります。
サンプルでは hover 時に0%を指定することでマウスオンで色を戻すようにしています。
相変わらずIEはお察しで、手間のかかる方法でグレースケールに出来ないことはありませんが、今回は純粋にCSSフィルターのご紹介のみということで…
