jquery plugin for background image lens blur effect

<link rel= "stylesheet" href= "Css/refocus.css" >               <script type= "Text/javascript" src= "Js/jquery.min.js" ></script><script type= "Text/javascript" src= "Js/refocus.js" ></script>      

Using this lens blur effect plugin requires the introduction of jquery and Refocus.js and refocus.css files.

<div class= "Refocus" id= "Hero-header" >  <div class= "REFOCUS-IMG-BG" ></div>  <!-- The contents of the container with focus-in will be obfuscated-  <div class= "refocus-img focus-in" >      </ Div>  <!--content in a container with Focus-out does not blur--  <div class= "Refocus-text-container" >    <div Class = "T" >      <div class= "TC" >        
HTML structure in HTML results, to be added to the focus and the non-focused containers, respectivelyfocus-inAndfocus-outClass
/* Increase or decrease blur level/#refocus-1. Focus-out, #refocus-1. REFOCUS-IMG-BG {    filter:blur (15px);    -webkit-filter:blur (15px);} /* The following code is the speed at which the display is modified */#refocus-1. Focus-in, #refocus-1. focus-out {    transition:filter 2s ease 0.3s;    -webkit-transition:-webkit-filter 2s ease 0.3s;}                 
CSS Styles
After introducing the Refocus.css file, if you need to modify the degree of ambiguity, you can modify the value of the following code in the Refocus.css file blur .
$ (window). Load (function () {    $ (' #refocus-1 '). Refocus ();});                  
Initializing plug-ins
After the page DOM element has finished loading, you can initialize the lens blur effect plugin by using the following method.
Original address: http://www.htmleaf.com/jQuery/Image-Effects/201510132661.html
jquery plugin for background image lens blur effect