Tipsカテゴリー

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

公開日：2014年2月17日
最終更新日：2014年5月8日

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

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

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

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

opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
background: #fff;

opacity: 0.7;

filter: alpha(opacity=70);

-ms-filter: "alpha(opacity=70)";

background: #fff;

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

opacity=0.25

opacity=0.5

opacity=0.75

opacity=0.25

opacity=0.5

opacity=0.75

WordPress の基礎から応用まで

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

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