<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="1" /> </filter> <filter id="blur-effect-2"> <feGaussianBlur stdDeviation="2" /> </filter> </svg>
#svg-filter-blur { filter:url(#blur-effect-1); margin: 15px; } #svg-filter-blur:hover { filter:url(#blur-effect-2); }