css3 - Blur part of an image with CSS -
I have problems with image I tried to blur a part of an image, but my solution does not work. Please, refer to this code:
HTML file CSS file It will appear like this :. It goes beyond the image. I would like to make a quick outline in this way. Is it possible in CSS? I used the Here are examples of working.
& lt; Div id = "image" & gt; & Lt; Div class = "blurred" & gt; & Lt; / Div & gt; & Lt; / Div & gt;
#image {width: 940px; Height: 360px; Background-image: url ('../img/ photo.png'); } #image Blur {background-image: url ('../img/ photo.png'); Background-position: center right; -Winkit-Filter: Blurred (3px); -Move-Filter: Blurred (3px); -o-filter: blurred (3px); -M-filter: Blurred (3px); Filter: Blurred (3px); Filter: Blurred (3px); float right; Height: 100%; Width: 360px; }
overflow external
div The internal setting of
hidden and
margin-correct is defined by a
-1 and it worked like a charm.
#image {... overflow: hidden; } #image Blur {... margin-right: -1px; }
Comments
Post a Comment