Create Image Gaussian Blur Effect Using jQuery And SVG - Gaussian Blur

Gaussian Blur is a lightweight jQuery plugin which applies Gaussian blur effect to images using SVG filters (for modern browsers) or CSS blur filters (for legacy browsers IE 7/8/9).

How to use it:

1. You need to make sure jQuery library and the jQuery Gaussian Blur plugin are included correctly.

<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="jquery.gaussian-blur.js"></script>

2. Add the images into your webpages as follows:

<span class="blurImageContainer">
  <img class="blurImage" src="1.jpg">
</span>
<span class="blurImageContainer">
  <img class="blurImage" src="2.jpg">
</span>
<span class="blurImageContainer">
  <img class="blurImage" src="3.jpg">
</span>

3. The required CSS styles.

.blurImageContainer {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.blurImageContainer > .blurImage {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.blurImageContainer > [id^="blurred"] {
  position: absolute;
  top:0;
  left:0;
  z-index:0;
}

4. Apply the Gaussian blur effect to your images.

$('.blurImageContainer .blurImage').css({opacity: 0});

$('.blurImageContainer').gaussianBlur({

  // level of blur
  deviation: 3, 

  //class of the original image 
  imageClass: 'blurImage' 

});

---

This awesome jQuery plugin is developed by finom. For more Advanced Usages, please check the demo page or visit the official website.