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

  & lt; Div id = "image" & gt; & Lt; Div class = "blurred" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

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; -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; }   

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 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; }   

Here are examples of working.

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -