How can I blur dynamic content behind a div?

Question

Im working on a project with a full screen google page listing. Is there any way (css, jQuery or other parameters ...) for overlaying the title and sidebar with a blur effect similar to the matte / blur effect of iOS?

I am trying to achieve something similar. Blurry Header Example

My problem is that I do not control what is under the heading and it is constantly changing. I cannot use 2 image trick to simulate a blurry background. Any suggestions?

Answer 1

Read this post fooobar.com/questions/170929 / ... and the linked link http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

The solution uses the following steps.

• Display HTML
• Duplicate the content area and convert it to canvas.
• Move canvas to header part
• Sync scrolling content with canvas in title

Down on the page is an example (narrow). There is a missing image or something else and it spilled a bit, but try to scroll. But I'm not sure about the frequency of changes to the content you talked about. This can cause serious performance issues. But try it.

I do not think of another option to achieve the very complex thought you want.

Answer 2

, svg feGaussianBlur? , .

A w3 :

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

A jsfiddle ( ):

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

:

<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

Will css blur work?

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);