Blurred background modal window

Hello friends! How to implement it in webflow?
Example: http://codepen.io/ellenbrook/pen/RNRdJz

With new feature “CSS filters” ( New feature: CSS filters | Webflow Blog) and interactions :wink: And I think you will not need a custom code.

I can’t find «Filters» in menu Interactions. Where is it?

Yeah, filters don’t seem to be in the interactions so custom code would be necessary. Bummer.

There is no need for custom code. Maybe this helps: https://preview.webflow.com/preview/kozmetika-ivy?preview=8c83c2c216632b27df48129ae1bbac13
In this case associated with scroll. The second section named “Intro” has an scroll interaction named “intro blur”. This changes the opacity of the div named “bgblur” wich is containig a blurred version of the initial background …
Cheers!

Is there a way to use these filters to blur what is behind a div?

i.e. If I had a full image background and a small rectangle div floating about it - could that div be transparent and blur the background image beneath it?

Does that make sense? If not, I’ll find an example. iOS does is all over the place.

1 Like