title: Dynamically blur slideshow content underneath div
body: <p>I'm having a hard time trying to find out how to pull this off, I've found a lot of resources for static images but none for things in motion. </p>
  
  <p>I basically have a slideshow using jQuery Cycle and I'm looking to make the background parts of the overlaying div elements cause a blur effect on the slideshow directly underneath them. I only need this working in Chromium so overall browser compatibility isn't an issue.</p>
  
  <p>Here is a JSFiddle to get a better idea: <a href="https://jsfiddle.net/9fy9yazc/" rel="nofollow">https://jsfiddle.net/9fy9yazc/</a></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8' /&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='http://malsup.github.io/jquery.cycle.all.js'&gt;&lt;/script&gt;
  
  
      &lt;script type='text/javascript'&gt;
      $(document).ready(function() {
  
          $('#background-scroll').cycle({ 
              fx: 'fade',
              pause: 0, 
              speed: "1000", //Time to fade into the next image [in milliseconds]
              timeout: "2000"  //Time spent on image [in milliseconds]
          });
  
      });
  
      &lt;/script&gt;
  
      &lt;style&gt;
      #background-scroll { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:-10;}
  
      .box {width: 40%; height: 100px; background: RGBA(255,255,255,0.4); border: 5px solid #FFF;
      -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;}
  
      .box p {text-align: center; line-height: 25px; color: #FFF; font-size: 50px;}
      &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div id="background-scroll"&gt;&lt;!-- Add Backgrounds in via PHP, all we need to do is add backgrounds into the backgrounds folder --&gt;
          &lt;img src='http://i.imgur.com/yd4bWi2.jpg' class='background' /&gt;
          &lt;img src='http://i.imgur.com/n91n9rr.jpg?1' class='background' /&gt;
      &lt;/div&gt;
  
      &lt;div class="box blur"&gt;
          &lt;p&gt;Blur Behind this Element&lt;/p&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;&lt;!-- Closes off the HTML Document --&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Basically a dynamic version of Blur.js (<a href="http://www.blurjs.com/" rel="nofollow">http://www.blurjs.com/</a>) which can be applied to everything rather than just background image elements.</p>