title: How to blur an image across browsers?
body: <p>In Chrome, the below CSS blurs the image.  However when I view the images in firefox, the image is no longer blurred.  Any advice on how to get it to work across browsers?</p>
  
  <pre><code>div.wrapper{
      float:left; /* important */
      position:relative; /* important(so we can absolutely position the description div */ 
      padding: 5px;
  }
  
  div.imageblur{
      position: relative; 
      top: 0; 
      left: 0; 
      width: 320px; 
      filter: blur(5px);
         -webkit-filter: blur(5px);
         -moz-filter: blur(5px);
         -o-filter: blur(5px);
         -ms-filter: blur(5px);
  
     margin:-1px;
     padding:1px;
  }
  
  div.image_container{
     width:318px;
     overflow:hidden;
  }
  </code></pre>
  
  <h1>html</h1>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
              &lt;!-- image --&gt;
              &lt;div style="position: relative; left: 0; top: 0;"&gt;
  
                  &lt;div class="image_container"&gt;
                      &lt;div class="imageblur"&gt;     
                          &lt;a href="youtube/IiGW9JA_aPg"&gt; &lt;img src="http://i2.ytimg.com/vi/IiGW9JA_aPg/hqdefault.jpg"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;                  
              &lt;/div&gt;
              &lt;!-- end image div --&gt;
  
  &lt;/div&gt;
  </code></pre>