So I designed this lay out, but im not sure how to make the white blur effect.
Im testing it under “listing” on vertical mobile
https://preview.webflow.com/preview/realestate-bdc930?utm_source=realestate-bdc930&preview=42e876997b1bc1a43131b82e90be6f8a
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
So it’s kind of tricky but the best way to do it is have a div overplayed on top of the background and apply the same background image to it and then blur that div that is on top of the other div. Using cover with the same settings for both div backgrounds should line them up. If you want sharp edges, don’t add rounded corners to the blurred div, you’ll have to wrap that div in another div with rounded corners and set the overflow to hidden. You may have to mess with the size of the blur to get the effect. Then add a white overlay.
Alternatively, I’ve had easier success exporting an already blurred version of the image out of photoshop and applying the same settings minus the div wrapper.
