CSSだけで画像ロールオーバー

画像ロールオーバーを面倒だ。
いつも画像を二つ用意したり、あの手この手で面倒な設定をしていたが、簡単な方法があるに違いないと思ってた。
調べたら、当然あったわけで…
このテクニックを使わなかった自分に腹が立つ！

CSSソースは下記赤字。

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

たったこれだけで、全てのリンク付き画像がロールオーバーで半透明になり、
まるで、ロールオーバー画像を用意した風になります。

＞＞サンプルページ

上のソースの例でいうと、
0.8や80というのは、不透明度80%、という意味になるので、
もっと薄くしたい場合は、0.6 、60 等に変更する事でカスタマイズ可能。

このソース、全画像リンクがロールオーバーで薄くなる、
という結構な荒技なので、
もし一部の画像にだけ適用したいのであれば、
a:hover img
の部分を
a:hover img.hoverImg
に変更し、適用させたいimgタグに、
class=”hoverImg”
を追加することで使い分けが可能。

超シンプルかつ実用的なので備忘録。