title: Zoom and Blur an image on hover
body: <p>I want to zoom and blur an image when hover over it. I am trying following code, it works somehow on the Chrome (not smooth transition, don't know why), but does not work on FF or IE although I have read that the blur should work with these browsers.</p>
  
  <p>Also my other question is that, is it possible to zoom the image from the center instead of the top left, as it does in the example:</p>
  
  <p><strong><a href="http://jsfiddle.net/XR32V/" rel="nofollow">Demo Link</a></strong></p>
  
  <p>Here's the code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="grow"&gt;
      &lt;img src="image.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.grow{
      width: 300px;
      height: 300px;
      overflow: hidden;
  }
  
  .grow img {
    height: 300px;
    width: 300px;
      -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
         -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
            transition: all 1s ease;
  
       filter: blur(0);
      -webkit-filter: blur(0);
      -moz-filter: blur(0);
      -o-filter: blur(0);
      -ms-filter: blur(0);  
      -ms-filter: blur(0px);
      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); 
  
  
  }
  
  .grow img:hover {   
      width: 400px;
      height: 400px;    
      filter: blur(5px);
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: url(blur.svg#blur);
      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');   
  }
  </code></pre>