creating a blurred background effect

Question

I am trying to create a blur effect on a page. I want a popup to show, and then the rest of the page be blurred. However I only seem to be able to blur background images, not actual elements on the page, is what I am trying to do even possible?

Answer 1

You can blur individual elements, but you can't create a blurring overlay.

Fortunately, the CSS -prefix-filter: blur(##) automatically applies to child elements. What you'd need to is wrap every element except your popup in a div, then apply the blur to that.

Example JS:

$('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);
}

Don't forget to unwrap the children of .blur-all once you're done with the popup.