Blur absolute positioned div to obscure content behind using CSS3 only - css

Question

I'm creating a modal pop-up that alerts the user, and overlays on the page.
I'm trying to make it so that the background is blurred (thus content on page is obscured) but the modal-pop-up is clear.
Here is an example, the modal fades in after several seconds. I have applied filter: blur to the .modal-newsletter-wrap which is the wrapper that sits full across the page. My intention was that the text and the cat image on the page would be blurred, but they are still crisp: http://codepen.io/anon/pen/Ggzxdz
Also, despite having filter: blur(0); set on the inner div .modal-newsletter it's still inheriting the blur of the wrapper div.
.modal-newsletter-wrap {
background-color:rgba(243,243,232,0.5);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.modal-newsletter{
-webkit-filter: blur(0);
-moz-filter: blur(0);
-o-filter: blur(0);
-ms-filter: blur(0);
filter: blur(0);
}

Answer 1

.modal-newsletter is child of .modal-newsletter-wrap, so if you set blur filter on .modal-newsletter-wrap it will of-course apply to .modal-newsletter, no matter if you set blur(0) on child element .modal-newsletter.
you can set the blur on<p><p>, which now contains your page body(including cat and all stuff), so the blur is not carried to the modal popup.
See this codepen, you will need to set the style for blur on your content, using javascript when the modal opens.
Another solution would be to put an overlay on the page , which is not realted to (not parent of) .modal-newsletter-wrap, and add blur to it. Like this

Answer 2

wrap all the contents except the overlay in a common parent element (e.g a <main> element) then run a blur animation after 5 seconds
http://codepen.io/anon/pen/EarEzo
#-webkit-keyframes blur {
0% { -webkit-filter: blur(0px); }
100% { -webkit-filter: blur(5px); }
}
#-moz-keyframes blur {
0% { -moz-filter: blur(0px); }
100% { -moz-filter: blur(5px); }
}
#keyframes blur {
0% { filter: blur(0px); }
100% { filter: blur(5px); }
}
main {
-webkit-animation: blur 1s linear 5s 1 forwards;
-moz-animation: blur 1s linear 5s 1 forwards;
animation: blur 1s linear 5s 1 forwards;
}
In this example http://codepen.io/anon/pen/gbqeVV I've also activated the close action via CSS :target pseudoclass. If the overlay element is a sibling of the content wrapper then you could transform the “close” label into a link as in the example, then add this style
#close-layer:target {
display: none;
}
#close-layer:target ~ main {
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
filter: blur(0);
}
The same effect can be also achieved without setting an hash, e.g. using an hidden checkbox and the :checked pseudoclass: http://codepen.io/anon/pen/XJOqJV
#closeoverlay { display: none; }
#closeoverlay:checked ~ .modal-newsletter-wrap {
display: none;
}
#closeoverlay:checked ~ main {
-webkit-animation: none;
-moz-animation: none;
animation: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
filter: blur(0);
}

Answer 3

Another approach is just one line of css: backdrop-filter: blur(1rem);:
<div class="some-background">
<div style="backdrop-filter: blur(1rem);"></div>
</div>