最近ホームページ内で使用される画像にぼかしをかけて使用しているデザインを見ることがあります。
ぼかし効果を与えることによっておしゃれに見せたりすることができますよね！

jQueryのプラグインで「Image Blur Plugin」というものがあるのですが、こちらを導入するとぼかし効果を与えていない画像に簡単にぼかしを入れることができます。

http://msurguy.github.io/background-blur/

使ってみたので使用方法など簡単に紹介したいと思います。
デモはこんな感じです

「Image Blur Plugin」を使用したデモページ

実際はぼかしを入れていない画像です。

「Image Blur Plugin」で画像にぼかしを入れる

まずは下記ページより「Image Blur Plugin」をダウンロードします。

https://github.com/msurguy/background-blur

ファイル読込

jQueryとbackground-blur.jsを読み込みます。

HTML

ぼかしを入れたい要素を用意します。

JS

HTMLで指定したIDで下記のように記述します。
オプションは必要なものを設定してみてください。

CSS

ぼかして表示する要素の高さや幅を指定します。
それぞれの環境であわせてみてください。

これで背景画像にぼかし効果を与えることができます。

サンプル

「Image Blur Plugin」を使用したデモページ

まとめ

今回はjQueryのプラグイン「Image Blur Plugin」を使用してみました。

背景をぼかすだけでちょっとおしゃれに見せることができるかもしれないです！
どのブラウザでも動作するようなのでホームページに取り入れてみてもいいのではないでしょうか？

それでは、また！