[css]マウスオーバー時に画像透過をさせロールオーバーを表現するcssテクニック

cssでロールオーバー(ホバー)時に画像透過をさせ簡単にロールオーバーを表現する方法。
非常に簡単に画像のロールオーバーを表現ができるので紹介します。
※上の画像は記事内容と全く関係ありませんm(__)m

このブログでもロールオーバー(ホバー)時の表現として画像透過をさせているます。
以下のサンプル画像に、ロールオーバーしてもらえれば少し薄くなっているのが分かるかと思います。

その透過処理の方法なんですが非常に簡単です。

■以下CSSでの画像透過の方法。

ロールオーバー時に画像透過をしたい「img」に以下のCSSを記述してください。

div#hoge a:hover img
{
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
background: #fff;
}

■ポイント

■filter: alpha(opacity=80);　これはie6ブラウザでは適応されません。

■opacity:0.8;　これでie6ブラウザでも同じように透過処理されます。

■数字が小さくなるほど透明度が増します。(薄くなります。)

といった感じです。
とても簡単ですし、知っておけば便利なテクニックのひとつですね。