0

I have been stuck on this problem for quite some time now. Here's the code:

    <div class="upper-half-container jumbotron d-flex align-items-center" 
    style="background-image: url('${mediaInfo.backdrop}');">
        <div class="container">
            <div class="media">
            ..................
            </div>
        </div>
   </div>

I am trying to give a blur effect to the background image, while preventing CSS to affect the inner divs. Here's the CSS:

.upper-half-container {
    background-size: cover;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    box-shadow: rgba(0, 0, 0, .2) 3px 5px 5px;
}


.container {
    -webkit-filter: none !important;
}

The CSS is inherited no matter what. I don't understand what's going on here. I have tried all: revert and all: initial properties as well. Can someone tell me where I might be going wrong?

Thanks!

Prashant Pandey
  • 4,332
  • 3
  • 26
  • 44
  • It caused by you are applying the CSS to parent container. In order to make a blur layer. You need to create 1 blur layer and the other 1 which is the actual layer to show the content. – Kasnady Feb 23 '18 at 08:03
  • @Kasnady Can you please elaborate on that? And why can't I revert the CSS applied on the parent container? – Prashant Pandey Feb 23 '18 at 08:15

0 Answers0