JSFiddle

  • Blur - SVG blur applied to SVG image element

    Image inserted via SVG with a SVG blur filter applied on hover

    <svg id="svg-image-blur">
        <image x="10" y="10" id="svg-image" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />
    
        <filter id="blur-effect-1">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </svg>