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

After spending the day on this, I was able to create a crappy, ugly, hacky solution. Probably won't be using it in the real project, mut maybe it could inspire someone else to use something in my solution but make it a little less ugly. At least the end result looks the way I'd like it to!

Using a white border and box-sizing: border-box, and then some margins I was able to get the end result have sharp edges, and 3/4 edges to not show the green background during the transition. If someone would find out why some edges fade with the background during the transition, that would probably help.

http://jsfiddle.net/fVNqm/2/

html:

CSS:

.box{
box-sizing: border-box;
position:relative;
border:3px solid white;
overflow: hidden;
background:green;
width:300px;
height:300px;
}

div img {
transition:.2s all;
position:absolute;
left: -3px;
top:-3px;
}

div img:hover{
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

.tophack{ 
background:white;
width:300px;
height:3px;
z-index:10;
position:absolute;
top: 0px;
}

Still hoping for something better!