【CSS】ホバー（マウスオーバー）実装サンプル集（画像の明度を上げる編）

2019.5.30
更新 2026.10.16
デザインのメモ
CSS

ホバーってなんですか？

マウスオーバーともいいますねー

opacity、一択だと思っていた

画像をホバー（マウスオーバー）すると光るやつ。ほんとは半透明にしてるだけだから透過して背景次第でなんだかなということがよくあった。

filter、を使っていいと思う

IE（Internet Explorer）でfilterはNG（対応していない）。
正確には、Windows 10の標準ブラウザーであるEdgeならOK。
今後、みんなWindows 10になるのであればみんなEdgeになるわけで。
という考えであれば問題ないわけで。

▽参考
マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」

サンプル

コードを見る（HTML・CSS）

HTML

<div class="s_brightness_01 oneBox">
  <figure><img src="https://125naroom.com/demo/common/img/slide01.svg" alt=""></figure>
</div>

<div class="s_brightness_02 oneBox">
  <figure><img src="https://125naroom.com/demo/common/img/slide01.svg" alt=""></figure>
</div>

<div class="s_brightness_03 oneBox">
  <figure><img src="https://125naroom.com/demo/common/img/slide01.svg" alt=""></figure>
</div>

<div class="s_brightness_04 oneBox">
  <figure><img src="https://125naroom.com/demo/common/img/slide01.svg" alt=""></figure>
</div>

<div class="s_brightness_05 oneBox">
  <figure><img src="https://125naroom.com/demo/common/img/slide01.svg" alt=""></figure>
</div>

<div class="s_brightness_06 oneBox">
  <figure><img src="https://125naroom.com/demo/common/img/slide01.svg" alt=""></figure>
</div>

CSS

/* ---------- 01 明度を上げる、105% ---------- */
.s_brightness_01 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_01 figure:hover img {
  filter: brightness(1.05);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_01 figure img { transition: none; }
}

/* ---------- 02 明度を上げる、110% ---------- */
.s_brightness_02 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_02 figure:hover img {
  filter: brightness(1.1);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_02 figure img { transition: none; }
}

/* ---------- 03 明度を上げる、115% ---------- */
.s_brightness_03 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_03 figure:hover img {
  filter: brightness(1.15);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_03 figure img { transition: none; }
}

/* ---------- 04 明度を下げる、80% ---------- */
.s_brightness_04 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_04 figure:hover img {
  filter: brightness(80%);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_04 figure img { transition: none; }
}

/* ---------- 05 明度を下げる、50% ---------- */
.s_brightness_05 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_05 figure:hover img {
  filter: brightness(50%);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_05 figure img { transition: none; }
}

/* ---------- 06 真っ黒にしてみる ---------- */
.s_brightness_06 figure img {
  transition: .3s ease-in-out;
}
.s_brightness_06 figure:hover img {
  filter: brightness(0);
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .s_brightness_06 figure img { transition: none; }
}

見本ページをひらく（ホバーで画像の明度を変える 6種）