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

Apr 28, 2010

ロールオーバー画像作るとき、どうしていますか?
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”
を追加することで使い分けが可能です。

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

スタイルシート スタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術
エ・ビスコム・テック・ラボ
毎日コミュニケーションズ
売り上げランキング: 150,242
速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)
河内 正紀
技術評論社
売り上げランキング: 258,363
白坂翔
白坂翔

1984年生まれ。ボードゲームカフェJELLY JELLY CAFEオーナー、将棋カフェCOBINオーナー、マーダーミステリー専門店Rabbitholeプロデューサー、株式会社人狼の代表取締役。ポーカーとゴルフが好きです。MORE

あわせてどうぞ

【微グロ注意】渋谷肉横町「居酒屋いっき」で、蛙の肉を喰らってきた