jQuery Plugin To Create Blur Mask Layers Using CSS3 - frost-mask

frost-mask is a lightweight jQuery plugin that uses CSS3 blur filters and transitions to create an animated blur effect on a specific container when triggered. 

How to use it:

1. Load the frostmask.css in the header of the html page that will provide the core CSS/CSS3 styles for the blur effect.

<link rel="stylesheet" href="css/frostmask.css">

2. Load jQuery library the frostmask.js at the bottom of the html page.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="js/jquery.frostmask.js"></script>

3. Call the function on the target container where you want to apply the blur effect to.

$('article').fmask();

4. Modify the CSS rules in the frostmask.css to adjust the blur effect.

.frost-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.2);
  transition: all .5s cubic-bezier(0.5, -0.5, 0.3, 1.4);
}

.frost {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  transition: all .5s cubic-bezier(0.5, -0.5, 0.3, 1.4);
}

---

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