CSS Blur and Overflow: Hidden
Update
I created a simliar jsfiddle here http://jsfiddle.net/ckaeno9s/ In safari, this works correctly. This is not the case in chrome. If you remove the: hidden; from line 15 you will notice that the blur is now applied correctly.
This jsfiddle sums up the problem well.
Original message
I'm trying to create a blurred banner effect and it works very well in Safari (bottom) but not so well in Chrome (top).
How it works, too much value is placed in a div in the header with a blur effect applied via the -webkit-filter in CSS, then the header has an overflow: hidden applied to it. I think an overflow is happening: the hidden one is applied before the chrome blur, so the smaller image stays blurry, giving soft edges. If the filter is applied in Safari before overflow: hidden. If I increase the size of my div with the lower hidden one I get this:
which is correct at the bottom of the header, but obviously now it comes out of my header. Is there a way to get my overflow: hidden to apply after blur? Or just achieve the same effect in chrome as I take a safari.
.content-blurred {
margin-top:0px;
padding:0;
position:absolute;
top:-50px;
left:0;
right:0;
-webkit-filter:blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter:url(#blur-effect);
opacity:1;
z-index: 1;
}
#header {
overflow:hidden;
position: fixed;
height:38px;
}
To summarize my question : I want to create hard edges on a blurred div.
source to share
Update
Something like that? http://jsfiddle.net/tbsksa18/1/
Html
<div class="parent">
<div class="miss-blurry"></div>
</div>
CSS
.parent{
width: 300px;
height: 300px;
margin: 100px;
position: relative;
overflow: hidden;
}
.miss-blurry{
width: 130%;
height: 130%;
position: absolute;
background: url(http://www.freeallimages.com/wp-content/uploads/2014/07/dog-1.jpg) center center;
background-size: cover;
-webkit-filter: blur(40px);
transform: translate(-15%, -15%);
}
source to share