user3097025 user3097025 - 2 months ago 11
CSS Question

Blur part of an image with CSS

I have a problem with an image. I tried to blur a part of an image, but my solution deosn't work.
Please, take a look at this code:

HTML file

<div id="image">
<div class="blur"></div>
</div>


CSS file

#image {
width: 940px;
height: 360px;
background-image: url('../img/photo.png');
}

#image .blur {
background-image: url('../img/photo.png');
background-position: center right;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: blur(3px);
float: right;
height: 100%;
width: 360px;
}


It will look like this: http://img.pl/THng.png . It goes beyond the image. I would like to create sharp outline like this: http://img.pl/VHng.png .

It's possible in CSS?

Answer

I have set the overflow property of the outer div to hidden and the margin-right of the inner one to -1 and it worked like a charm.

#image {
    ...
    overflow: hidden;
}

#image .blur {
    ...
    margin-right: -1px;
}

Here is the working example in JSFiddle.