超シンプル！hover画像作る必要ナシ、CSSだけで、画像をロールオーバー！

2010年5月26日 07:48 alpha | 個別ページ | コメント(0) | トラックバック(0)

ロールオーバー画像作るとき、どうしていますか？
javascript？CSS Sprites？

まぁ、普段はちゃんとロールオーバー用の画像作って、
javascriptやら、cssやら使って組みますよ、僕も。

ただ、仕事じゃないコーディングの時は、
極限まで、手を抜きます。面倒なことは、全てはしょります。

中でも、画像のロールオーバー、
面倒くさいの極みですよね。
THEメンドクサイ、です。

そんな時、ロールオーバー画像を用意しなくても、
用意した風に装う、ステキな技をご紹介します。

その方法とは、CSSに下記ソースを追加するだけ。


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

Sample

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

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

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

超シンプルかつ実用的なので、
ぜひ、試してみてくださいね。