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>