Defined Edges With CSS3 Filter Blur

Question

I am blurring some images with this code

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

The edges of the image get blurred too though. Is it possible to blur the image, while keeping the edges defined? Like an inset blur or something?

Answer 1

You could put it in a <div> with overflow: hidden; and set the <img> to margin: -5px -10px -10px -5px;.

Demo:

Output

CSS

img {     filter: blur(5px);         -webkit-filter: blur(5px);         -moz-filter: blur(5px);         -o-filter: blur(5px);         -ms-filter: blur(5px);     margin: -5px -10px -10px -5px; }  div {     overflow: hidden; } ​ 

HTML

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

Answer 2

I was able to make this work with the

transform: scale(1.03);

Property applied on the image. For some reason, on Chrome, the other solutions provided wouldn't work if there was any relatively positioned parent element.

Check http://jsfiddle.net/ud5ya7jt/

This way the image will be slightly zoomed in by 3% and the edges will be cropped which shouldn't be a problem on a blurred image anyway. It worked well in my case because I was using a high res image as a background. Good luck!