26

I have a <div> with an background-image with blur effect.

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);

The only problem is that all the Child elements also get the blur effect. Is it possible to get rid of the blur effect on all the child elements??

<div class="content">
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div>


    .content{
        float: left;
        width: 100%;
        background-image: url('images/zwemmen.png');
        height: 501px;
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
    }

    .opacity{
        background-color: rgba(5,98,127,0.9);
        height:100%;
        overflow:hidden;
    }
.info{
    float: left;
    margin: 100px 0px 0px 30px;
    width: 410px;
}

http://jsfiddle.net/6V3ZW/

4
  • I don't believe so. Can you instead re-work the markup so the child becomes a sibling instead? You should be able to position it so that it will appear as desired. Commented Mar 14, 2014 at 13:37
  • Why is the image both inline and a background image?
    – Paulie_D
    Commented Mar 14, 2014 at 13:38
  • @Paulie_D I did add the jsfiddle... I am using the same image twice. 1 time as a background( the one that will be blurred) and once on the front of the page. Commented Mar 14, 2014 at 13:40
  • have you considered looking into the experimental feature backdrop filter? it applies a filter to everything behind an element. developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
    – Bjamse
    Commented Feb 14, 2019 at 20:30

3 Answers 3

15

Create a div inside content & give bg image & blur effect to it. & give it z-index less the the opacity div, something like this.

<div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div>

Use Css

.content{
    float: left;
    width: 100%;
}

.content .overlay{
    background-image: url('images/zwemmen.png');
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index:0;
}

.opacity{
    background-color: rgba(5,98,127,0.9);
    height:100%;
    overflow:hidden;
    position:relative;
    z-index:10;
}
1
  • 1
    Thanks, had to ad an absolute position to .content .overlay but it's working now. Commented Mar 14, 2014 at 14:24
4

Add an overlay something like this:

<div class="overlay"></div>

Then:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px) sepia(50%);
  z-index: 9999999999999999999;
}

Here the parent child relationship is not what matters. The z-index is important.

It will apply the filter to anything sitting behind the div.

1
  • This is both awesome and the definitive modern answer
    – Stephen R
    Commented Nov 16, 2022 at 23:56
0

what I did was I just created a CSS class as shown below in my style sheet.

 .bg-blur {
      height: 100vh;
      width: 100%;
      background-image: url("../img/login-bg.jpg");
      filter: blur(8px);
      -webkit-filter: blur(8px);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

And then I created a div inside the body with the CSS class as shown below and that works for me.

<div class="bg-blur"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.