Blur - HTML element blur via SVG filter

A HTML element has a blurred effect applied through a SVG filter.

by Ayyappan Sakthivadivel

HTML

<img id="svg-filter-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt="HTML element blur via SVG" height="200" width="300" />

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

CSS

#svg-filter-blur { filter:url(#blur-effect-1); margin: 15px;}
#svg-filter-blur:hover { filter:url(#blur-effect-2); transition: all 10s linear;}