マウスが載ったときだけ画像を半透明にすると、どの画像が選択中なのかが把握しやすい

画像リンクの上にマウスポインタを載せたときに、その画像を半透明にしてみせると、「どの画像が選択中なのか」がハッキリ分かって良さそうです。画像を半透明にするには、CSS3のopacityプロパティを使えば簡単です。

テキストをリンクにしたときは「リンクの上にマウスを載せたときに配色を変化させる」デザインをよく見ます。でも、画像がリンクになっている場合に画像を差し替えるのは(そういう記述を加えるのも画像を用意するのも)面倒ですよね。なので、opacityプロパティを使って画像の透明度を変化させるのが、手軽に「選択中の画像」を判別させやすくて便利な気がします。

画像の上にマウスポインタが載ったときにだけ画像を半透明にするスタイルシート

マウスポインタが載ったときにだけ画像を半透明にするCSSの記述方法はとても簡単で、例えば以下のようにCSSソースを書くだけです。

img:hover {
   opacity: 0.5;
}

hover疑似クラスを使って、img要素に対してopacityプロパティの値を「0.5」にしています。
実際に表示させてみると、以下のような感じになります。各画像の上にマウスを載せてみて下さい。

上記の場合だと、画像(img要素)の上にマウスポインタが載ると、その画像の透明度(正確には不透明度)が50％になります。つまり半透明です。
opacityプロパティは、不透明度を表すプロパティで、「0(完全に透明)～1(完全に不透明)」の間で自由な数値を指定できます。
もし、ほんの少し透明にするだけで構わないなら、例えば以下のように「0.75」を指定すれば「25％だけ透明」にできます。

img:hover {
   opacity: 0.75; /* 25％ほど透明にする */
}

opacityは「透明度」と解説されることもありますが、正確には「不透明度」です。
※「opacity」という英単語の意味自体が「不透明」です。

実際に表示させてみると、以下のような感じになります。画像の上にマウスを載せてみて下さい。

先ほどよりも、不透明度が増して、少しだけ透過するようになったはずです。

画像に半透明のカラーフィルタを掛けたような感じにする

このように画像を半透明にした場合、単に「画像の表示が薄くなる」わけではなく、「背後にある色が見えている」のです。
なので、画像を掲載している領域の背後(親要素)に対して望みの背景色を加えておけば、まるで半透明のカラーフィルタを掛けたような効果を出すこともできます。

例えば、以下のように記述すると、画像の上にマウスを載せたときにだけ、青色の半透明のカラーフィルタを掛けたような感じになります。

p {
   background-color: #8080ff; /* ボックスの背景色(＝カラーフィルタ) */
}
p img:hover {
   opacity: 0.6;
}

実際に表示させてみると、以下のような感じになります。画像の上にマウスを載せてみて下さい。

上記のサンプルは、正確には以下のようなHTMLソースとCSSソースで作っています。
背後のボックスを画像と同じ面積にしておくことで、最初は(画像が半透明にならないうちは)背後の青色背景は見えません。画像が半透明になったときにだけ、背後の青色が(不透明度の指定分量だけ)透けて見えることになります。

<p class="sample"><img src="fallriver.jpg" width="200" height="150" alt="川滝" /></p>
<p class="sample"><img src="fallriver.jpg" width="200" height="150" alt="川滝" /></p>
<p class="sample"><img src="fallriver.jpg" width="200" height="150" alt="川滝" /></p>

p.sample {
   background-color: #8080ff; /* 淡い青色 */
   width: 200px; /* 画像の横幅に合わせる */
   height: 150px; /* 画像の高さに合わせる */
   float: left; /* 左に寄せて並べる(※) */
   margin: 0px 5px 5px 0px; /* 右と下に余白を設ける(※) */
}
p.sample img:hover {
   opacity: 0.6; /* 40％ほど透過させる */
}

「※」印部分は、必須ではありません。その場のデザインに応じて指定して下さい。また、ボックスのwidthとheightは、表示する画像のサイズに合わせます。色や透明度は自由に指定して下さい。

というわけで、マウスが載ったときだけ画像を半透明にする方法と、画像にカラーフィルタを掛けたような効果を出す方法でした。
マウスの動作に合わせて画像の表示をちょっとだけ変化させるテクニックとしてはとても手軽ですから、ぜひ試してみて下さい。

—【All About 関連記事】—

ちなみに、画像そのものを半透明にするのではなく、画像の上に重ねて「半透明にした解説文章」を見せる方法は、過去にAll Aboutで解説しました。→『画像にマウスを載せた際に、半透明の説明を重ねる方法』(＠All About ホームページ作成)
こちらはjQueryを併用した方法なので、スタイルシートだけで作成しているわけではありませんが。興味があれば、ぜひご参照下さい。

(更新日：2017年07月08日)