にしし ふぁくとりー:西村文宏 個人サイト

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

マウスが載ったときだけ画像を半透明にするCSSの書き方 [イメージ,]

画像で作ったリンクは、ぱっと見た感じではクリック可能なのかどうかがハッキリ分かりません。画像リンクの上にマウスポインタを載せたときにその画像を半透明にする効果を出すと、「どの画像が選択中なのか」が明確になる上にどの画像をクリックしようとしているのかも明示できて良いかもしれません。マウスに合わせて画像を半透明にする方法を解説。

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

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

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

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

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

CSSソース

img:hover {
   opacity: 0.5;
}

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

川滝 川滝 川滝

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

CSSソース

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

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

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

川滝 川滝 川滝

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

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

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

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

CSSソース

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

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

川滝

川滝

川滝

※左側から順に、ボックスの背景色を「淡い青(#8080ff)」・「淡い黄(#ffff80)」・「淡い赤(#ff8080)」にしてみた例です。

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

HTMLソース

<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>

CSSソース

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を併用した方法なので、スタイルシートだけで作成しているわけではありませんが。興味があれば、ぜひご参照下さい。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---