How to disable blur in child div

Demir Agovic — Mon, 15 Jul 2019 12:49:00 +0000

I have one div with background image which is blur and I have create child div with some content. Contents in child div is blur and I don't know how disable this.

html file:

<div class="home-div" id="img_container">
    <div class="row container slider">
        <div class="col-4 disable-blur">
            <p>some text</p>
        </div>
    </div>
</div>

css file:

#img_container {
    width: 100%;
    height: 70%;
    overflow: hidden;
    background: url('/assets/mbtownpanorama.jpg');
    background-size: auto;
    background-position: left;
    animation: back-and-forth 90s infinite;
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(5px);
  }

  @keyframes back-and-forth {
    0% {
      background-position: left;
    }
    50% {
      background-position: right;
    }
    100% {
      background-position: left;
    }
  }

  .disable-blur{
    filter: blur(0)!important;
    -webkit-filter: blur(0)!important; /* Safari 6.0 - 9.0 */
  }

DEV Community: Demir Agovic

How to disable blur in child div