blur

CSS
body { padding: 64px 0;}
.blur {filter: blur(20px);}
.block {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between; width: 200px; height: 200px; margin:0 auto 0;}
.block div { width:100px; height:100px;}
.red { background: #f00;}
.blue { background:#00f;}
.yellow { background:#ff0;}
.green { background:#0f0;}
.target {width: 200px; height: 200px; margin:0 auto 0; background-size: contain;}
.target2 {width: 200px; height: 200px; margin:0 auto 0; background-size: contain;}
.h2title { text-align: center; margin: 0 0 32px 0; padding: 0;}
.conts { margin-bottom: 96px;}
.img {
  position: relative;
  width: 200px;
  height: 200px;
  margin:0 auto 0;
}
.img > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.target4 {
  transition: opacity ease .5s;
}
.target4:hover {
  opacity: 0;
}

HTML
<h2 class="h2title">CSS:filter: blur</h2>
<div class="block blur conts">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
    <div class="green"></div>
</div>

<h2 class="h2title">background-blur.js</h2>
<div class="target conts"></div>

<h2 class="h2title">background-blur.js アニメーション</h2>
<div class="target2 conts"></div>

<h2 class="h2title">background-blur.js マウスオーバー</h2>
<div class="img conts">
<div class="target3"></div>
<img class="target4" src="color.jpg" alt="" />
</div>

JS
<script src="jquery-1.11.3.min.js"></script>
<script src="background-blur.min.js"></script>
<script>
$('.target').backgroundBlur({
imageURL:　'color.jpg',
blurAmount: 30
});
</script>
<script>
var $target = $('.target2');
$target.backgroundBlur({
// 元画像のURL
imageURL: 'color.jpg',
// ぼかし効果の強さ
blurAmount: 20,
// 透明度
opacity: 0.5,
// このプロパティに値が設定されている場合、
// 対象要素直下に挿入されるsvg要素のクラス名としてこの値が使用される
imageClass: 'blur-img__svg',
// このプロパティに値が設定されている場合、
// 対象要素直下のsvg要素のうしろにdiv要素が挿入され、
// クラス名としてこの値が使用される
overlayClass: 'blur-img__div',
// このプロパティに値が設定されている場合、
// backgroundBlurメソッド実行からこの値(ミリ秒)の時間をかけて、
// 透明度が0からopacityプロパティの値にむかって移り変わる
duration: 1000,
});
setTimeout(function() {
// フェードアウト
$target.backgroundBlur('fadeOut');
}, 3000);
setTimeout(function() {
// フェードイン
$target.backgroundBlur('fadeIn');
}, 5000);
setTimeout(function() {
$target.backgroundBlur('fadeOut');
}, 7000);
setTimeout(function() { 
// 元画像を変更
$target.backgroundBlur('color2.jpg');
}, 9000);
</script>

<script>
$('.target3').backgroundBlur({
imageURL:　'color.jpg',
blurAmount: 30
});
</script>