How to recreate this menu blur from Rolls-Royce?

Design help General
1

Hey!

We’re researching for a project, and was wondering if anyone had managed to recreate live background blur on a Webflow site’s nav menu (SEE GIF)?

ezgif.com-video-to-gif

Any help would be greatly appreicated! There is no project to look at here, but if you’d like to experience the menu head to any Rolls-Royce Motorcar internal page - https://www.rolls-roycemotorcars.com

2

Use interaction on scroll into view

3

Thanks Janne,

But how would that create the background blurring effect. As far as I can tell, adding blur filter to an element simply blurs the element it’s self?

Going to do some more testing and see if I can find a solution.

Thanks.