CODEWITHSUNDEEP
cssimageblur
sharataka
sharataka

Reputation: 5132

How can I blur an image using css but keep the border straight?

I am trying to blur an image using CSS. I'm usig "blur" but I'm finding this also blurs the border. Is there a way to keep the border straight but blur the rest of the image?

http://www.inserthtml.com/2012/06/css-filters/

css

filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Upvotes: 10

Views: 17751

Answers (5)

Reggie Pinkham
Reggie Pinkham

Reputation: 12738

To keep the edges sharp you can first move the image within it's container left and up the same amount of the blur—this will clean up the top/left edges. To sharpen the bottom/right edges reduce the width of the image's container by 2 * the blur amount.

#image {
    filter: blur(5px);
    -webkit-filter: blur(5px); /* support appears limited http://caniuse.com/#search=css%20filter%20effects */
    margin-left: -5px; /* move the image negative x-blur distance */
    margin-top: -5px; /* move the image negative y-blur distance */
}
#container {
    /* actual image size is 220px * 177px */
    width: 210px; /* subtract 2 * x-blur from width */
    height: 167px; /* subtract 2 * y-blur from height */
    overflow: hidden;
}

Joshua's Fiddle elaborated here: http://jsfiddle.net/3EHe9/

Upvotes: 0

Spencer May
Spencer May

Reputation: 4525

Have a div with the border just enclose on it then blur the image.

css

div.container
{
border:2px solid #000000;
display:inline-block;
}

img.theimage
{
filter: filter(value);
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);
}

html

<div class="container">
<img class="theimage" src="iamgesrc.jpg" />
</div>

Upvotes: 0

Joshua Dwire
Joshua Dwire

Reputation: 5443

Try something like this:

HTML:

<div id="container">
   <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Benz-velo.jpg/220px-Benz-velo.jpg">
</div>​

CSS:

#image{
   filter: blur(5px);
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);

   margin:-1px;
   padding:1px;
}

#container{
   width:222px;
   height:179px;
   overflow:hidden;
}

The margin on the image seems to be required for some reason (at least in Chrome).

Also on jsfiddle: http://jsfiddle.net/jdwire/HUaBV/1/.

Upvotes: 14

brentonstrine
brentonstrine

Reputation: 22752

Wrap a div around the image and size the div a few pixels smaller than the image is sized (otherwise the edge of the blur won't be cropped). Then put overflow:hidden on the div.

See the jsFiddle demo here.

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16685

You will likely need to wrap that image in a block-level element and set its dimensions to match the image and add overflow: hidden.

Upvotes: 4

Related Questions