Blur effect isn't covering the whole div

Design help General
1

I’m using a css style to make a blur effect but the blur isn’t covering the whole div.
Should i add something to the code to fix this, or is there another solution?

http://theblur.webflow.io/

Here is the code that i’m currently using:

<style>
.blur {    
    -webkit-filter: blur(10px); 
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}
</style>

Example of what i mean:

968×71 36.6 KB

Here is my public share link: https://preview.webflow.com/preview/theblur?preview=f59fb6c0f87b6bb05c65a0cfb7ebe612

2

That’s how blur works. Either on an image you’ll get blurred edges http://codepen.io/grayghostvisuals/pen/Ivpto either on a bg image you’ll get unblurred edges; or white edges. Because blur is calculated by duplicated and moved around pixels. So either it gets polluted by white pixels out of element, either it can’t fully calculate it on an element that doesn’t have all neighbours.

in orderto have the full bg blurred you need to nest your element in another one that’s overflow hidden and enlarge the nested one with negative margins, I guess.

3

I know, would be cool to see this intergrated into webflow with an option to fit the full bg.

I already tried scaling the blur div but that still gives a weird effect.

I have 2 problems with scaling the blur div:

1: it zooms towards you
2: when it zooms you still see the edges but then it quickly fixes itself

Isn’t there a way to achieve the full blur effect? :relaxed:

Thanks

4

Still didn’t figure out how it could cover the whole section, i tried scaling it with overflow none but it still isn’t the full effect i want.

If you look here: http://theblur.webflow.io/

You will see when the image it doesn’t blur the edges for 1 second but then snaps back and it blurs the whole image. How can this be fixed?

5

I’m doing some blur effects on something I’m working on, and here’s what I’ve learned so far.

I have to construct my divs differently. One must create an overall div that contains other divs and MASKS those divs’ content that extends beyond its borders, using the overflow: hidden property. Then plop your SEPARATE divs in there that masking div, one for each type of content: One for the blurry background, a separate div for text (so it stays crisp), and on mine, a separate div for a semi-transparent overlay. Use the Z-index to get things layered correctly. All these divs inside your masking div need to be absolute positioning. Oh, and you need to position your blurry background 50px beyond the mask on all sides—so that parts of it are hidden at the edges—so that you don’t get that blurry cut-off edge.

Here’s mine… it’s a messy work-in-progress, so it isn’t public or clone-able, yet, but you can see the effect in the blog post boxes:

http://alpha-e066f3.webflow.io

2 Likes
6

That’s a lovely looking site so far @TylerDunlap ping me when it’s done! Excited to see the finished product. That’s a great utilization of the css blur effect for the background image.

Waldo :slight_smile:

1 Like
7

this is one of the solutions that i found from internet, just see the source code:

http://smallpay.webflow.io/

when hover, the video get blur, and no white edges.
the site will be out of date soon.

8

Hmm,
Could you tell me how you did that? Wasn’t able to find code that’s different from what i use :confused:

What’s your secret? :slight_smile:

9

step1: add the following code to the webflow custom code:

<style>
.parent {
    -webkit-box-shadow: inset 0 0 200px #000000;
       -moz-box-shadow: inset 0 0 200px #000000;
            box-shadow: inset 0 0 200px #000000;
}
.blur:hover {       
    -webkit-filter: blur(10px); 
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);  
}
</style>

step2:
add a div named “parent”
add a element( any widgets is ok ) named “blur” within the “parent”.

refer to :
http://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur

10

so far, the best way is use : backdrop filter (only for safari 9+).

11

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