Menu
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?
624
Blurring the edges of a photo in CSS is pretty straightforward, with one gotcha. To blur a photo we need to use box-shadow in a way where the shadow "eats" the image. For this effect to work, the blur must be the same color as the surrounding background, and inset must be used.
Use backdrop-filter instead! It blurs just like filter but without any edges, and without any compromises like resizing or scaling the image.
The filter property defines visual effects (like blur and saturation) to an element (often <img>).
Syntax. filter: blur(px); To apply a blur effect to the background image, with the blur function use the z-index property to set the stack order of the element, set the width and height 100% to have a full background image.
You could put it in a <div> with overflow: hidden; and set the <img> to margin: -5px -10px -10px -5px;.
Demo: 
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; } <div><img src="http://placekitten.com/300" /></div> 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!
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
