マウスオーバーした時、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

スポンサーリンク

ページの先頭へ