Blurring Everything inside a Div

Asked Sep 20 '13 at 17:08

Active Sep 20 '13 at 17:09

Viewed 120 times

I've got a quick question.

I've got a div class that is 50px by 50px. I was wondering if I could do something like:

<body>
  <div id="blur">
  </div>
</body>

style

body {
background-image:url(image.png);
}


#blur {

width:50px;
height:50px;
-webkit-filter:blur(2px);
}

So the background image is layed out awesome.

But I create a div 50 by 50px in size that I want blur. and just the spot on the #blur...well...blurs, is this possible?(Im currently trying the setting I just displayed but it ain't working...) any workarounds for this?(without using jQuery)

edited Sep 20 '13 at 17:09

Kai Qing

18,793
5
39
57

asked Sep 20 '13 at 17:08

user1876553

can you create a fiddle using jsfiddle.net?? – Anusha Honey Sep 20 '13 at 17:09
Does this help:- http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/ ?? – Rahul Tripathi Sep 20 '13 at 17:11
1

Appears to be working for me in Chrome: http://jsfiddle.net/WCfjD/ – Joren Sep 20 '13 at 17:13
Are you sure its working? The image is supposed to be the background image, the #blur is supposedly just being a 50by50px square in the middle of the layout that blurs whatever content is in the background.....And its not working for me unless I add an Image... – user1876553 Sep 20 '13 at 17:18
1

Look at http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css. – Barbara Laird Sep 20 '13 at 17:21
@BarbaraLaird thanks for the info :D It gave me another idea of what to do! – user1876553 Sep 20 '13 at 17:31

Blurring Everything inside a Div

0 Answers0