【CSS】画像をぼかして表示する方法

というわけで今回は、画像をぼかして表示させる方法についてお話します。

filterを使って画像をぼかす

画像をぼかすプロパティは「filter」というCSSプロパティです。
ぼかすだけでなく色変化などにも使用されます。

今回は「ぼかし」について説明します！

filter: blur() ;

ぼかしで使用するのは「filter: blur() ;」というプロパティです。
早速コードを見ていきましょう。

See the Pen ブログ用　 by そす (@Sosgoyo) on CodePen.

ここでは画像をホバーすると「ぼかし」を入れて「白黒」にするようにしてます。
ではコードを見ていきましょう。

filter: blur(5px) grayscale(1);

blur ･･･「ぼかし」　数値を上げるとぼかし度合いが大きくなる。
grayscale ･･･「白黒」　％、もしくは0～1で値を決める。白黒の度合いを値で設定する。　

blurの値は個人的には5px~10pxくらいが良いかなぁと思います。
気になる方は是非色々試してみてください♪

まとめ

というわけで今回は画像をぼかして表示させる方法についてお話ししました。
良くアニメーションなどで一緒に使われるプロパティです。
スライドさせて画面に現れたら、ぼかした画像がくっきり現れるみたいな･･･。

是非覚えていきましょ～。