remove blur effect on child element

Question

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/

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. — Mister Epic, Mar 14 '14 at 13:37
@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. — Robert Verkerk, Mar 14 '14 at 13:40
have you considered looking into the experimental feature backdrop filter? it applies a filter to everything behind an element. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter — Bjamse, Feb 14 '19 at 20:30

score 15 · Accepted Answer · answered Mar 14 '14 at 13:39

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;
}

Thanks, had to ad an absolute position to .content .overlay but it's working now. — Robert Verkerk, Mar 14 '14 at 14:24

score 4 · Answer 2 · answered May 03 '21 at 02:41

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.

answered May 03 '21 at 02:41

danday74

52,471
49
232
283

This is both awesome and *the* definitive modern answer – Stephen R Nov 16 '22 at 23:56

score 0 · Answer 3 · answered Aug 19 '21 at 06:57

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>

remove blur effect on child element

3 Answers3

Linked

Related