CSS

【コピペOK】HTML/CSSで画像を半透明にする方法【:hover 使用】

スポンサーリンク

【コピペOK】HTML/CSSで画像を半透明にする方法【:hover 使用】

 

画像にマウスポインターを重ねたときに、画像を白の半透明にしたいんだけど、うまく行かない。なんで?

 

このような疑問を解決します。

 

こんにちは、誠太です。

 

今回は画像の上にマウスポインターを乗せたときにhoverの擬似クラスを指定して、アンカーリンク画像を白の半透明にする方法についてお伝えします。

 

サンプルコードを記述しているので、そのままコピペして使用してもOKです!

 

【コピペOK】HTML/CSSで画像を半透明にする方法【:hover 使用】

【コピペ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させて半透明にするのは身につけておこう

 

CSSで画像をhoverさせて半透明にする方法は、『:hover』を使用して『opacity』を使用することでした。

 

opacityの数値は0.1~0.9の間で指定することが可能となっています。

それぞれ10%~90%の透過率を設定することができるようになっているので、どれくらいの比率を透過させるのかを理想の透過率になるまで変更しつつ設定してみてください。

 

オススメ記事【Udemyが強い!】Web制作を独学で学べる講座はひとつあれば事足りそう

オススメ記事プログラミングの本は学習に必要だけど、本だけではキツいというお話【体験談】

  • この記事を書いた人
  • 最新記事
誠太

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを更新しています。

-CSS
-

Copyright© SEITALITY , 2019 All Rights Reserved.