title: How to have an image with css filter:blur and sharp edges?
body: <p>I would like to blur an image when hovering.</p>
  
  <p>The problem is that the edges of the image also blur unpleasantly. 
  In the Fiddle you can see it clearly with the green background.</p>
  
  <p>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.</p>
  
  <p>Any ideas how to have sharp edges with this effect?</p>
  
  <p><a href="http://jsfiddle.net/d8Njs/">http://jsfiddle.net/d8Njs/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="item"&gt;
     &lt;img src="http://placekitten.com/300"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.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); */
  }
  </code></pre>