Blur part of an image with CSS
14,433
Solution 1
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.
#image {
width: 940px;
height: 360px;
overflow: hidden;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png');
}
#image .blur {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.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;
margin-right: -1px;
}
<div id="image">
<div class="blur"></div>
</div>
Solution 2
You choose a suitable background-position
for the outer div.
Make inner div
position:absolute
. This is where the blur appears. Apply blur to the :before
selector.
Author by
user3097025
Updated on July 17, 2022Comments
-
user3097025 almost 2 years
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's possible in CSS?