【HTML・CSS】マウスをホバーしたときに画像を透明にする

この記事ではマウスをホバーしたときに画像などの要素を透明にする方法を記載します。

opacityを使用して画像を透明にする

要素を透明にする場合、CSSに不透明度を設定するopacityを使用します。

次の画像はopacityをまだ設定していない状態です。

この画像に対してopacityを設定すると、次のように画像が半透明になります。

.sample-box {
  opacity: 0.5;
}

また、:hover擬似クラスと併用することで、マウスカーソルをホバーしたときに画像を透明にすることができます。

.sample-box:hover {
  opacity: 0.5;
}