Hi, so I’ve created a landing page divided into 2 columns with a blur effect when you hover on either columns. The effect is blur as you can see but what’s bothering me the light edge lining the blur effect is leaving a white lining around the edges which makes the middle logo look bad as well. Is there a work around to this? Also I tried tweaking the blur radius but basically the same
What you’re witnessing is pixel edge blur. Popular editing programs such as After Effects have an option to “Repeat Edge Pixels” which solves this known issue, but since we’e using CSS blurs, we’re not so fortunate.
A solution I’ve found is placing your image inside of a parent Div, whereas the image contains the blur and the parent div Overflow is set to "Hidden. You’ll still notice the edge blur, but if you add a scale modifier to the image, with a value around 1.1 or so, you should see the image enlarge and the edge blur dissapear as the parent div clips your content.
3 Likes
Aaah OK thats interesting. If a may, can I kindly ask you how to go about doing your guidelines in my design website structure? I’m fairly new to Webflow and didn’t understand or know were to find half of the instructions you mentioned. Thanks again 
Looking good! The trick @Hunter_Reynolds mentioned works like a charm.
Just set the div containing the image to overflow: hidden
This will hide anything sticking out past the boundaries of the div.
Then scale the image slightly up so the edges are well outside the div (and with overflow: hidden, that means the white edges gets hidden too). 1,04 scaling (aka 4% scaling) seems to do the trick.
2 Likes
thank you so much
1 Like
That’s great, thanks for sharing!