Blur background content on pop up?

Question

SO this is more of a "is this possible" kind of question rather than "how can I fix my idiot errors?" sort of thing.

I want to use a shadowbox to display some content for a microsite, and I was thinking how neat it would be if instead of that transparent black overlay that always comes up, the content in the back would just get all blurred out.

Is that possible? I tried searching online but I didn't find anything relevant.

THanks in advance!

Answer 1

It is possible, but not widely supported across all browsers due to the use of transitions - older browsers aren't going to see this at all. The effect can be achieved with CSS3 and jQuery by following the guide found here http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/.

Answer 2

For a cross-browser solution, instead of the transparent black background you referenced, you could use a tiled background image that is a semi-transparent, blurred png created in photoshop using the "Blur" filter.