Blur changing elements behind div

Question

First of all I want to make clear that I already have searched for some solutions. And I also have seen some 'blur issues' here on stackoverflow. But mine is just little different.

I want to blur the part of a slideshow that falls behind a transparent div element. On my testserver I have a preview to make it understandable you can check it here.

The things I have already tried: - blurjs.com - CSS only blur wich you can check here - Google

These two basicly do the same, both the solutions don't support changing backgrounds. Maybe you guys know a solution.

I hope you can help me. Thanks.

The code I have till now:

<div id="blur-overlay"></div>
<div id="slideshow">
    <div class="slide active"><img src="http://www.zastavki.com/pictures/originals/2012/Space_Earth_from_space_035859_.jpg" alt="Slideshow Image 1" /></div>
    <div class="slide"><img src="http://www.zastavki.com/pictures/originals/2012/Space_Full_Moon_from_the_Earth_035858_.jpg" alt="Slideshow Image 2" /></div>
    <div class="slide"><img src="http://i.space.com/images/i/000/005/402/original/hubble-space-bubble-photo-2-100622-02.jpg?1292270748" alt="Slideshow Image 3" /></div>
</div>

and the CSS:

#blur-overlay {
        width: 250px;
        height: 250px;
        border-radius: 100%;
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 105px;
        left: 50%;
        margin-left: -125px;
        z-index: 100;
    }
    #slideshow {
        position:relative;
        height:300px;   
        width:1000px;
        float: left;
        overflow: hidden;
    }
    #slideshow .slide {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }
    #slideshow div  {
        display: none;
    }
    #slideshow div img {
        width: 100%;
        float: left;
        position: relative;
    }
    #slideshow div.active {
        display: block;
        z-index:10;
        opacity:1.0;
    }
    #slideshow div.last-active {
        z-index:9;
    }

you have to provide your code before publishing your question — MickyScion, Jun 17 '14 at 18:29
There is not much code to be shown, I only have html and css because none of the solutions have worked. But I will post the HTML and CSS I have. — Sjoerd, Jun 17 '14 at 18:31
possible duplicate of [How to use CSS (and JavaScript?) to create a blurred, "frosted" background?](http://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background) — apaul, Jun 17 '14 at 20:45

maxov · Answer 1 · 2014-06-17T18:55:02.030

EDIT: I misunderstood what was trying to be done. The poster wishes to blur the background behind a div and not the div itself. Only way to do that is to have a part of the image blurred, which is actually also covered in the article. Also refer to the other answer.

Original:

I think this is a symptom of not reading through the articles fully. Here's a code example right from the article(CSS Gaussian blur behind a translucent box):

#search {
  filter: blur(10px); /* Doesn't work anywhere yet */
  -webkit-filter: blur(10px);
  filter: url('blur.svg#blur'); /* for Firefox - http://jordanhollinger.com/media/blur.svg */
}

On looking at your site, I saw this:

#blur-overlay {
  filter: blur(15px);
}

The article clearly states that this css property doesn't work anywhere. It goes on with code examples of what works(this is what I gave you). For firefox compatibility, it links to an svg document's blur definition.

To do this specific thing, create an svg file(you can embed this into your document or host it somewhere else):

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="svg_blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
</svg>

Add the corresponding url() to your css file like this:

#blur-overlay {
  filter: blur(10px);
  -webkit-filter: blur(10px);
  /* If you're using an SVG in the document */
  filter: url('#svg_blur');
  /* If you're using an SVG hosted on your web server, say at /static/blur.svg */
  filter: url('/static/blur.svg#svg_blur');
}

I don't think he's having problems with the blur CSS, but applying that to a transparent div and its background (which is impossible). — kthornbloom, Jun 17 '14 at 18:48
Oh I'm sorry, I did not delete that part of the code I have tested previously. I've read it and yes I know it doesn't work. Thanks for your answer I'm going to try it right away. — Sjoerd, Jun 17 '14 at 18:49
What do you mean? It is totally possible. The article he linked gave an example, my code example worked on his example when I tried it in my browser. EDIT: nevermind, I understand now what he was trying to do. Yes, it doesn't actually work without some further hacking. — maxov, Jun 17 '14 at 18:50

score 0 · Accepted Answer · answered Jun 17 '14 at 18:47

0

(as far as I'm aware) There is no easy way to make that happen. This is because CSS blurs only apply to specific elements. So you could blur your transparent circle, but it will not affect whatever is behind it.

The only possible solution I can think of would be to have TWO slideshows running at once. The one you already have, and then a second one on top. The second one would have CSS blur applied. Then on the blurred slideshow, you could use CSS to make it a circle with overflow hidden.

answered Jun 17 '14 at 18:47

kthornbloom

3,660
2
31
46

I know it's a while ago but I saw this post in my history and wanted to let you know that I've used this idea to create the effect. Not the most beautiful solution but it works :). – Sjoerd Feb 28 '17 at 11:45

Blur changing elements behind div

2 Answers2