How can I blur the dynamic contents behind a div?

Question

Im working on a project with a full screen styled google maps page. Is there any way (css, jQuery, or other options...) to overlay a header and a slide-in sidebar with a blur effect similar to the iOS frosted/blur effect?

Im trying to achieve something like this. Sample blurred header

My problem is, because I don't control what is underneath the header and it constantly changes I can't use the 2 image trick to simulate a blurred background. Any suggestions?

Answer 1

Read this post https://stackoverflow.com/a/19688466/1663572 and related link http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

The solution uses this steps.

1. Render the HTML
2. Duplicate the content area and convert it to canvas.
3. Move the Canvas to the Header part
4. Sync the scroll of the content with the canvas in the header

Down on the page is an example (the narrow one). There is some missing image or something else and it is a bit spilled but try scrolling. But I'm not sure about frequency of changes of the content you were mentioning. This could be causing serious performance issues. But try it.

I don't think of any other option to achieve very comlicated think you want.

Answer 2

If you are loading in an external image, then could you load it into an svg container as a background and apply an feGaussianBlur filter? Not sure how much control over the markup you have.

A w3 Schools primer on the blur:

http://www.w3schools.com/svg/svg_fegaussianblur.asp

A jsfiddle ( not mine ):

https://jsfiddle.net/jamygolden/yUG5U/2/

Sample markup:

<svg id="svg-image-blur">
    <image x="0" y="0" id="svg-image" width="300" height="200" xlink:href="http://path/to.your/image.jpg" />

    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

CSS:

#svg-image-blur { height: 200px; width: 300px; }
#svg-image:hover { filter:url(#blur-effect-1); }

Answer 3

Use backdrop-filter, it is now supported by many browsers:

backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);