White Blur Around Image When Using CSS3 Blur Filter

How to remove white border from blur background image

I have added overflow, padding and even margin, but still the problem not solved. So i tried to give the image tag between div. Problem solved.

<div class="background-image">
<img src="http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg" width="100%" height="100%"/>
</div>

css

 .background-image {
  background: no-repeat center center fixed; 
  background-size: cover;
  display: block;
  left: -5px;
  top:-5px;
  bottom:-5px;
  position: fixed;
  right: -5px;
  z-index: 1;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  margin:-5px;

 }

js fiddle

http://jsfiddle.net/2pgdttLh/

Defined Edges With CSS3 Filter Blur

You could put it in a <div> with overflow: hidden; and set the <img> to margin: -5px -10px -10px -5px;.

Demo:

Output

CSS

img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}
​

HTML

<div><img src="http://placekitten.com/300" />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</div>​​​​​​​​​​​​

White borders on blurred video in background

Hopefully this meets your use-case! This won't happen if you use backdrop-filter instead of filter - try putting an overlay over the video with backdrop-filter :)

Here's an example: https://codepen.io/annaazzam/pen/RwrMGVG

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(8px);
}

<video>...</video>
<div id="overlay"/>

Remove white haze from the outside of a image blurred using CSS

Ok so here is the solution,

As @Kaiido suggested I needed to use the svg filters method.

But for internet explorer I needed to generate a base64 image, with a small resolution. 10px x 10px
Then load the base64 image for internet explorer, which created a blurred effect when the image is streched to fit the container.

For the transition to a non blurred image, I used the SMIL transition for browsers which support it. filter: blur transition for browsers which don't support SMIL and no transition for IE the image is just swapped.

HTML:

    <svg width="0px" height="0px"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

 <filter id="better-blur" x="0" y="0" width="1" height="1">
  <feGaussianBlur stdDeviation="25" result="blurred">
  <animate id="anim" attributeType="XML" attributeName="stdDeviation" from="25" to="0" begin="indefinite" fill="freeze"
        dur="0.35s"></animate>
  </feGaussianBlur>

  <feMorphology in="blurred" operator="dilate" radius="25" result="expanded"></feMorphology>

  <feMerge>
    <feMergeNode in="expanded"></feMergeNode>
    <feMergeNode in="blurred"></feMergeNode>
  </feMerge>
</filter>
</svg>
<div class="image-wrapper orig" style="background-image: url(\'' . esc_url($thePostThumbUrl) . '\'); background-size: cover; background-position: bottom; filter: url(#better-blur);visibility: hidden;"></div>

JAVASCRIPT:

<script type="text/javascript">
    if (!jQuery("#anim")[0].beginElement) {
        jQuery(".image-wrapper").css("filter", "blur(25px)");
    }
</script>
<script type="text/javascript">
    jQuery(window).load(function() {
        setTimeout(function() {
            if (jQuery("#anim")[0].beginElement) {
                jQuery("#anim")[0].beginElement();
            }
            else {
                jQuery(".image-wrapper").css("filter", "blur(0px)");
            }
        }, 1000);
    });
</script>

CSS:

.image-wrapper {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
}

Thanks Kaiido for all your help :)

How to make blur effect without white light?

The only way to remove the blurred edges in a pure CSS way is by zooming the element a little bit then clipping the edges with overflow: hidden added to the container:

.container {  overflow: hidden;  border: 1px solid red;  display: inline-block;}
.blur {  -webkit-filter: blur(5px);  -moz-filter: blur(5px);  -o-filter: blur(5px);  -ms-filter: blur(5px);  filter: blur(5px);  transform-origin: 50%;  transform: scale(1.3);}

<div class="container">  <div class="blur">    <img src="http://lorempixel.com/700/300" alt="Sample Image">  </div></div>

CSS filter blur not blurring edges

You can set overflow: hidden and stretch a little bit the blurred image. I have set width to 110%, height to 35%, left, right and bottom to -5% (the added percentage to width and height). Hope this is what you want.

html,body{  width: 100%;  height: 100%;  overflow: hidden;  margin: 0;  padding: 0;}
body {  display: flex;  align-items: center;  justify-content: center;}
.container {  width: 300px;  height: 250px;}
.inner {  width: 100%;  height: 100%;  position: relative;  overflow: hidden;}
.image {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;  background-size: fill;}
.image:before {  left: -5%;  right: -5%;  bottom: -5%;  content: "";  position: absolute;  height: 35%;  width: 110%;  background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi)  no-repeat center center fixed;  background-size: fill;  -webkit-filter: blur(8px);  filter: blur(8px);  overflow: hidden;}

 <div class="container">   <div class="inner">     <div class="image">
     </div>   </div> </div>

---

Related Topics