CSS: 画像を半透明にする
画像を半透明にする場合は、opacityプロパティを使います。
opacityの値は0~1まで設定でき、 半透明にしたい場合は0.5を指定します。
HTML
<div> <img class="sample1" src="https://step-learn.com/img/img04/tori.png" width="120px"> </div>
CSS
<style> .sample1 { opacity: 0.5; } </style>
下のように画像が半透明で表示されます。
マウスのhover時に画像を半透明にする
マウスのホバー時に画像を半透明にする場合は、 「:hover」セレクタでopacityを指定します。
「:hover」セレクタは a要素だけでなく、 div要素やimg要素など、どんな要素にも使用できます。
マウスホバー時に半透明
HTML
<p> <img class="sample2" src="https://step-learn.com/img/img04/tori.png" width="120px"> <div>マウスホバー時に半透明</div> </p>
CSS
<style> .sample2:hover { opacity: 0.5; } </style>