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 background.

If I'd scale the image i.e. 1.2, it would fix the problem in the end, but during the transition the blurry edges still appear.

Any ideas how to have sharp edges with this effect?

http://jsfiddle.net/d8Njs/

html:

<div class="item">
   <img src="http://placekitten.com/300"/>
</div>

css:

.item {
overflow: hidden;
width:300px;
height: 300px;
background: green;
}

.item img{
transition:all .5s ;
}

.item img:hover{
-webkit-filter: blur(5px);
/*skaling the image would help, but it still looks bad during the transition
-webkit-transform:scale(1.2); */
}