ネットで色んなウェブサイトを見ていると、マウスが乗ったときに画像や文字の色が薄まるアクションを見かけることがありますよね。これを実装するのはとても簡単なので、ご紹介します。

opacityプロパティー

opacityプロパティーは、透明度を表す数値です。0なら透明度ゼロなので完全に不透明、つまり全く見えなくなります。1なら透明度1（100％）なので完全に透明です。opacityプロパティーが指定されていないときは、透明度1すなわち完全に透明です。

IE対応

IE以前の古いIEではopacityプロパティーに対応できません。しかし、IEは独自の仕様であるfilterプロパティーで透明度を指定できます。

たとえば「filter:Alpha(opacity=50);」は「opacity:0.5;」と同じ意味です。

opacityプロパティーでは完全に透明な状態を1としているのに対して、「filter:Alpha(opacity=」では完全に透明な状態を100としている点に注意してください。

以下、様々な透明度指定におけるCSSの記述を書いてみます。

opacity:1;

「style=”opacity:1;filter:Alpha(opacity=100);”」透明度1の画像

opacity:0.75;

「style=”opacity:0.75;filter:Alpha(opacity=75);”」透明度0.75の画像

opacity:0.5;

「style=”opacity:0.5;filter:Alpha(opacity=50);”」透明度0.5の画像

opacity:0.25;

「style=”opacity:0.25;filter:Alpha(opacity=25);”」透明度0.25の画像

opacity:0;

「style=”opacity:0;filter:Alpha(opacity=0);”」透明度0の画像。当たり前ですが何も見えません。

:hover擬似要素でマウスが乗ったときだけ半透明に

:hover擬似要素を使うことで、マウスが乗ったときだけ透明度を下げ、画像や文字の色が薄まるアクションを実現することが出来ます。

マウスを乗せると透明度が下がります。HTMLとCSSは以下の通りです。

HTML

<img class="hover-opacity50" 
src="https://webshufu.com/top/wp-content/uploads/2012/11/20121210010244489_easyicon_cn_256.png" 
alt=""  width="150" height="150" />

css

.hover-opacity50:hover{
opacity:0.5;
}

半透明化は簡単

どうでしょうか。マウスオーバー時に半透明化するのはとても簡単だと納得していただけたのではないでしょうか。

皆さんのサイトにもドンドン取り入れてみてください。