Search code examples
jquerypopupshadowbox

Blur background content on pop up?

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!

Solution

  • 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/.