CSSだけで簡単！画像を白黒→カラーに切り替えるマウスオーバーエフェクト

Webサイトを見ていて、画像にマウスをのせると白黒からカラーに切り替わる
「おしゃれなエフェクト」を見たことはありませんか？
実はこの効果、CSSだけで簡単に実装できるんです！

この記事では、HTMLとCSSだけで実現できる白黒→カラーのホバーエフェクトの書き方と、
応用パターンまで丁寧にご紹介します。

なぜ画像にエフェクトを加えるのか？

画像にマウスオーバー（ホバー）エフェクトを加えると、次のようなメリットがあります。

• ユーザーの注目を集める
• 動きが出て洗練された印象になる
• クリック誘導を自然に促すことができる

静的なページにちょっとしたアニメーションを加えるだけで、見栄えもUXもぐっと良くなります。

基本のCSSコード：白黒 → カラー

▼ CSSコード

img.grayscale-hover {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

img.grayscale-hover:hover {
  filter: grayscale(0%);
}

▼ HTMLにクラスを指定

<img src="sample.jpg" alt="サンプル画像" class="grayscale-hover">

解説

• filter: grayscale(100%)
  　画像を完全にモノクロ化します。
• transition: filter 0.3s ease
  　マウスオーバー時の変化をなめらかに。
• :hover の状態で grayscale(0%)
  　カラー画像に戻します。

このように、JavaScriptやjQueryを使わずに、たった数行のCSSだけで実現できるのが大きな魅力です。

応用編：ズームやぼかしと組み合わせる

白黒切り替えに加えて、拡大・ぼかし・シャドウなどを組み合わせると、よりリッチな印象を与えられます。

▼ 例：ズームを加えたエフェクト

img.effect {
  filter: grayscale(100%);
  transition: all 0.3s ease;
  transform: scale(1);
}

img.effect:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

<img src="sample.jpg" alt="ズーム画像" class="effect">

このコードでは、ホバー時にカラーへ戻りながら、画像が少し拡大します。

スマホ対応は必要？

スマートフォンは「マウスオーバー」がないため、
通常このエフェクトはPC表示でのアクセントとして使われます。
もしスマホでもタップ時に変化を出したい場合は、JavaScriptを使う方法が適していますが、
基本的にはPC限定でも問題ありません。

まとめ

画像を白黒からカラーに切り替えるホバーエフェクトは、たった数行のCSSで実装可能です。

ポイントまとめ

• filter: grayscale() を使えば白黒にできる
• :hover を組み合わせてカラーに戻す
• transition で滑らかに
• 応用でズームやぼかしも可能

ページに動きや注目ポイントを加えたいときに、ぜひ取り入れてみてください！

Favorite