Blur - CSS blur

CSS blur applied to a HTML element

HTML

<div id="css-filter-blur" style="background:(http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg)" alt="Blur" height="200" width="300"> </div>

<svg id="svg-image-blur">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

CSS

#css-filter-blur { 
  -webkit-filter: blur(2px); 
  filter: url(#blur-effect-1); 
  margin: 20px;
  -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
      -ms-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out;
}
#css-filter-blur:hover { 
  -webkit-filter: none; 
  filter: none; 
}