How to have an image with css filter:blur and sharp edges?

Question

I would like to blur an image when hovering.

The problem is that the edges of the image also blur unpleasantly. In the Fiddle you can see it clearly with the green back

Answer 1

A bit of SVG:

And some CSS:

 #kitten:hover { filter:url(#blur); }  

Should produce the desired effect. http://jsfiddle.net/5Jk6p/

#kitten:hover {
  filter:url(#blur);
}