CSS | マウスホバーで画像を暗くする方法
CSSでマウスホバー時に画像をふわっと暗くする表示サンプルとサンプルコードを紹介しています。
画像をマウスホバーで暗くする
以下はマウスホバー時に画像をふわっと暗くする表示サンプルになります。
HTMLは通常の画像タグのみで問題ありません。
実装時にはidまたはclass属性を指定して利用して下さい。
<img class="hover-brightness" src="https://1-notes.com/wp-content/uploads/2023/06/slime-2.png" alt="画像の説明">マウスホバー時にふわっと暗くなる、または明るさを戻すアクションさせるために「transition」プロパティでアニメーション時間を指定しています。
マウスホバー時のスタイル指定「:hover」に対して「filter」プロパティで明度（輝度）を調節する「brightness」を指定しています。
「brightness」に指定する値は「0」で完全に黒くなり、「1」でそのままの通常の明るさとなります。
サンプルの通り、「filter」プロパティは画像の透過部分に影響を与えません。
img.hover-brightness {
width: 250px;
transition: 0.3s;
}
img.hover-brightness:hover {
filter: brightness(0.1);
}