I’m doing some blur effects on something I’m working on, and here’s what I’ve learned so far.
I have to construct my divs differently. One must create an overall div that contains other divs and MASKS those divs’ content that extends beyond its borders, using the overflow: hidden property. Then plop your SEPARATE divs in there that masking div, one for each type of content: One for the blurry background, a separate div for text (so it stays crisp), and on mine, a separate div for a semi-transparent overlay. Use the Z-index to get things layered correctly. All these divs inside your masking div need to be absolute positioning. Oh, and you need to position your blurry background 50px beyond the mask on all sides—so that parts of it are hidden at the edges—so that you don’t get that blurry cut-off edge.
Here’s mine... it’s a messy work-in-progress, so it isn’t public or clone-able, yet, but you can see the effect in the blog post boxes: