Transparent block with blur effect?

Question

css

How can I make a small transparent block with blur on top of the background with a picture? IE9+ support and adaptability required.

I tried to use blur.js, but it somehow behaves strangely when "resizing" and sometimes it does not work right away and draws the block for a rather long time.

Answer 1

It's strange that you have problems with blur.js...
You can try to bypass css:
jordanhollinger.com/2014/01/29/css-gaussian-blur-b...
Or look at js again.
gianlucaguarini.github.io/Vague.js
https://www.designedbyaturtle.co.uk/demos/blur-bg/