このような疑問を解決します。
こんにちは、セイタです。
今回は画像の上にマウスポインターを乗せたときにhoverの擬似クラスを指定して、アンカーリンク画像を白の半透明にする方法についてお伝えします。
サンプルコードを記述しているので、そのままコピペして使用してもOKです！
【コピペOK】HTML/CSSで画像を半透明にする方法【:hover 使用】
アンカータグで包んだ画像ファイルにマウスポインターを乗せたときに白半透明するのは簡単です。
5秒あれば実装できます。
画像にマウスを載せたときに白半透明にする方法
HTML
<a class="anchor_hover">
<img href="images/example.jpg">
</a>
CSS
.anchor_hover {
opacity: 0.8;
}
こちらのコードを使用することで、簡単に実装することができます。
HTMLの中の『class名』と『imageファイル名』を実装の環境に合わせて、適所変更していただければと思います。
hoverの擬似クラスを使用する
『:hover』は擬似クラスと言って、マウスポインターがCSSの対象になっているセレクターに対して、マウスポインターが乗ったときにどのようなアクションを起こすかを指定するものです。
今回はopacityを使用して、マウスポインターが対象に乗ったときに白の半透明にするという方法を使っていますが、他にもcursorというプロパティもあってカーソルが乗ったときにマウスカーソルを変更するというものもあります。
background-colorプロパティを使用する間違い
一見マウスポインターがアンカータグで包んだ画像に対して白の半透明にするという方法を想像するので、『background-color: rgba (255,255,255,0.8);』を指定したくなってしまいますが、変化は表れないはずです。
なぜうまく行かないのかは、背景画像よりも画像が上部にあるためです。
CSSで背景画像として設定している場合は本記事の方法でうまくいくはずですが、実際に実装するかというとhoverを使ったほうが楽なので、基本的に使うことは無いと思います。
CSSで画像をhoverさせて半透明にするのは身につけておこう
CSSで画像をhoverさせて半透明にする方法は、『:hover』を使用して『opacity』を使用することでした。
opacityの数値は0.1～0.9の間で指定することが可能となっています。
それぞれ10%～90%の透過率を設定することができるようになっているので、どれくらいの比率を透過させるのかを理想の透過率になるまで変更しつつ設定してみてください。