My Color　「ダンクハーツ-谷春樹Blog-」

画像のロールオーバーの際には、明るくしたロールオーバー後の画像を用意し、Javascriptで制御したり、CSSで座標をずらしてロールオーバーを実現したりしますが、元画像とCSSだけでも簡単なロールオーバーを実現することができます。

そのためにはCSSのプロパティーである、「opacity」と「filter」を使用します。

HTMLソース

<a href="http://tani.dank-hearts.com">
    <img src="http://tani.dank-hearts.com/css_btn.jpg" />
</a>

CSS

a:hover img{
    opacity:0.6;
    filter: alpha(opacity=60);
}

サンプル

使用している「opacity」プロパティはimgの不透明度を下げるプロパティーです。 IEはopacityプロパティに対応していないので、さらに「filter」を使い、IEでの不透明度を下げます。