【CSS】【filter】画像にエフェクトをかける方法 – ホバーした際に写真を白黒からカラーに

CSSのfilterプロパティとは？

CSSの中には、画像にエフェクトを簡単にかけられる「filter」プロパティがあります。

filterを使えば、画像を白黒にしたり、ぼかしを入れたり、明るさやコントラストを調整したりと、いろいろな加工ができます。

「デザインをもうちょっとオシャレにしたいな…」と思ったときに役立つ技の一つなので、ぜひ活用してみてください！

よく使われるfilter効果

filter: grayscale(100%);    /* 画像をモノクロにする */
filter: blur(5px);          /* ぼかし効果 */
filter: brightness(150%);   /* 明るさ調整 */
filter: contrast(200%);     /* コントラストを調整 */
filter: saturate(300%);     /* 彩度を調整 */
filter: sepia(80%);         /* 画像をセピア色にする */

filter効果は組み合わせて使用できる

filterプロパティは、複数の効果を組み合わせて使用できます。

例えば、白黒にした上で少し明るさを加えると、柔らかい印象のモノクロ画像が作れます。

filter: grayscale(100%) brightness(120%);

動きのあるエフェクトを作るには？

ただエフェクトをかけるだけでなく、動きがあるとさらに魅力が増します！

例えば、画像がグレースケール（モノクロ）からカラーに変わるようなアニメーションを加えてみましょう。

img {
  filter: grayscale(100%);
  transition: filter 1s ease-in-out;
}
img:hover {
  filter: grayscale(0%);
}

このコードでは、画像にマウスをホバーすると、徐々にカラーに戻るアニメーションが実現できます。

ホバーを外すとまたモノクロに戻るので、動きのあるスタイリッシュな演出ができますね！

マスクや影を使った効果でさらにオシャレに！

次に紹介するのは、画像にマスクや影を加える方法です。例えば、drop-shadow()を使えば、画像に立体感を持たせることができます。

filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));

こうすることで、画像の周りにぼんやりとした影をつけることができ、より深みのあるデザインが可能です。画像の配置や背景次第で、様々な演出に応用できます！

filterプロパティを使うときのポイント！

最後に、filterを使う上で気をつけたいポイントをいくつかご紹介します。

ブラウザ対応

filterプロパティはほとんどのモダンブラウザで対応していますが、古いブラウザでは一部サポートされていないことがあります。念のため、使いたいエフェクトが対応しているか確認しておきましょう。

パフォーマンス

特に大きな画像や多くのエフェクトを同時に適用すると、ページの読み込みやパフォーマンスに影響が出ることがあります。適度に使うのがポイントです！

さいごに

CSSのfilterプロパティを使えば、シンプルに見えるけど、プロっぽいエフェクトを画像に加えることができます！

ホバーアニメーションを使えば、動きのあるデザインが手軽に実現できるので、ぜひ試してみてください！