Create a blurry background effect

Question

I am trying to create a blur effect on a page. I want the popup to appear and then the rest of the page is blurred. However, it seems that I can only blur background images and not the actual elements on the page, what am I trying to do even maybe?

Answer 1

You can blur individual elements, but you cannot create an overlay blur.

Fortunately, CSS -prefix-filter: blur(##) automatically applied to children. You will need to wrap each element except your popup in a div, and then apply blur to this .

JS example:

 $('body > *').wrap('<div class="blur-all">').append($popup); 

CSS

 .blur-all { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } 

Remember to expand the .blur-all children after the popup is complete.