[CSS]CSSのみでロールオーバー効果

いつも見直すのが面倒なのでメモ。
以前に元同僚に教えてもらった方法です。

a:hover img { opacity:0.7; filter:alpha(opacity=70); -ms-filter: "alpha( opacity=70 )" }

IEもいけますよね。
通常時とオーバー時の画像を並べてくっつけた画像を用意してbackgroundに指定した画像のpositionをズラすという手法が良く使われますが、更新の手間が大きくなるので正直なところ余り効率的ではないと感じていましたが、これは楽だし効率的、且つ、実用的です。

デメリットとしては、背景が白である事が前提になります。

今はこれか、普通に2枚に分けた画像をJSで操作するのが効率、実用性ともに良いかな～と思う次第です。