マウスオーバーした時、CSS3で画像を半透明にする方法

画像の上にマウスカーソルをのせた時に、リンクを示すため半透明にすることがあります。
マウスオーバー用の別画像を用意しなくても、img要素にCSS3のopacityプロパティを指定することで半透明は実現できます。

opacityプロパティは、要素の透明度を指定するCSS3のプロパティです。

値は、0~1の間で指定し、0が完全に透明で、1が完全に不透明です。
小数点以下も指定できます。

以下は指定例ですが、背景色の白に向けて透明化するようにしています。
また、古いブラウザ用にfilterを用いた指定も併記しています。
最新のブラウザでは、「opacity: 0.7;」だけで構いません。

透明度を0.25、0.5、0.75に設定したサンプル画像を示します。
マウスを画像の上にのせてみてください。

opacity=0.25

opacity=0.25の画像サンプル1

opacity=0.5

opacity=0.5の画像サンプル1

opacity=0.75

opacity=0.75の画像サンプル1

opacity=0.25

opacity=0.25の画像サンプル2

opacity=0.5

opacity=0.5の画像サンプル2

opacity=0.75

opacity=0.75の画像サンプル2

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ