hover画像不要！cssだけでマウスオーバー時の変化を実現させる。

画像リンクのマウスオーバー時。
画像が切り替わると見栄えも良いし、ユーザビリティも高い。
cssでhover時に見える画像を切替えるのが一般的だが、
とはいえ、面倒なこともある。
特に更新記事などの見出しリンク画像なんて、
毎回丁寧に平常時とhover時の画像を作ったりしてられない。
というわけで、そんな時用のcssを発見・取得。
cssで画像の透明度を変えて、ロールアップ時の見え方を変える方法。
これなら画像一個で良いし、いちいち設定もいらない。
さらに透明度はcssで変更できるのでサジ加減も自由自在。
素晴らしい。

一応、IE6～8、chrome、firefoxには対応している模様。
以下、スタイルシートのソース。

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