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”
を追加することで使い分けが可能。

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


This entry was posted in CSS, テクニック and tagged , . Bookmark the permalink.

One Response to CSSだけで画像ロールオーバー

  1. Pingback: Tweets that mention CSSだけで画像ロールオーバー | 暁備忘録 -- Topsy.com

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>