Glass effect (over picture)

Design help General
1

Hi, i was wondering if there is some easy way to make frosting glass effect in webflow on the part of the picture (where you use text then, for instance)

something like this;
https://codepen.io/r_p4rk/pen/EaXrav

Thnx!

2

Hi,

see that preview:

https://preview.webflow.com/preview/testfield-1d1178?preview=70811804b5ae356b979dc8d131e6909c

As you hover over the left side blur goes all the way (div resizes from 10% to 100%).

These are two divs, one on top of another, both holding the same background picture. Upper div has the blur filter, which you’ll find in right-hand panel in Effects pane (close to bottom).

Cheers!

3

Hey, here’s another example. One thing to take notice in is that the text can’t be in the same div as the blurred one.

Designer preview:
https://preview.webflow.com/preview/popup-blur?preview=d88779267555cc2441879711d8776f48

Live site:
http://popup-blur.webflow.io/

Hope our examples could help you achieve your goals.

Edit: Noticed my example works badly in Safari. Try it in Chrome.

1 Like
4

thank you both, i am more interested in how to do it without using 2 images. with 2 images it doesn’t scale the right way.

5

If you set both backgrounds to cover size with fixed positioning, the scaling will be identical.

6

Cricitem is right, there shouldn’t be a problem.

@lukap3rcic the pen you showed us also has two pictures, but it uses pseudoelements which are currently unavailable. Basically filter: blur;has to have something to work with.

7

I made a mistake in my demo, fixed it. Scaling works now, looks like one image, resize browser and check.

8

thank you all. i was having problem with my big picture being not-fixed and aligned at top, and also overflow:hidden not working properly.

I found a way to do it with simple (small) div with overflow: hidden, and then nesting the blurred bg picture as a child to that. Setting the picture to exactly cover the bg image allowed me match the responsive design. This is the result; https://www.zeropass.io/

9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.