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

Apr 28, 2010

WEBデザイン

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

画像のロールオーバー、
面倒くさいの極みですよね。
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”
を追加することで使い分けが可能です。

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