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

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

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

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

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

以下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ブラウザでも同じように透過処理されます。

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

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

現場のプロから学ぶXHTML+CSS

著者/訳者:益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬

定価:¥ 2,940

Amazon価格:¥ 2,940

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

著者/訳者:市瀬 裕哉 福島 英児 望月 真琴

定価:¥ 3,360

Amazon価格:¥ 3,360

“[css]マウスオーバー時に画像透過をさせロールオーバーを表現するcssテクニック” への6件の返信

  1. お聞かせ下さい。
    >「img」に以下のCSSを記述してください。
    IMGに記述するとはどういう意味でしょうか?
    CSSに記述するということでしょうか?
    HTMLにはどのように記述すればよろしいのでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です