<img id="css-filter-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt="Blur" height="200" width="300" /> <svg id="svg-image-blur"> <filter id="blur-effect-1"> <feGaussianBlur stdDeviation="2" /> </filter> </svg>
#css-filter-blur { 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: blur(2px); filter: url(#blur-effect-1); }