0

I have no idea how to use the :not selector, so that I do not come any further with my issue. The issue is that the popup window is blured while the background is not.

This is the background which is to be blured when the popup opens:

 .pinPopUpShellOverlay {
        background: rgba(191, 192, 194, 0.3) none repeat scroll 0 0;
        bottom: 0px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 999;
        filter: blur(2px);
    }

This is the popup window:

.pinPopUp {
    background: #fff;
    display: inline-block;
    max-height: 50%;
    min-height: 100px;
    position: relative;
    width: 75%;
}

HTML code:

<!--pinPopup Start here-->
                <div class="pinPopUpShellOverlay" style="display:none;">
                    <div class="common_table">
                        <div class="common_table_Cell text-center">
                            <div class="pinPopUp">
                                <div class="closePinPopUp">
                                    <span class="icon-closepin close icon-close"></span>
                                </div>
                                <div class="popUptitle">
                                    Popup Title
                                </div>
                                <div id="popUpcontent_scorll" class="popUpcontent_scorll">
                                    <div class="popUpcontent">
                                        <div class="row popUpimagerow"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

I know there is something to do with the :not selector but have no idea how to. Thanks for the help.

n.o.h.
  • 19
  • 2
  • can you show your html code – לבני מלכה Oct 02 '18 at 10:33
  • 1
    Here is solution: https://stackoverflow.com/questions/28975673/how-to-blurcss-div-without-blur-child-element – Qubis741 Oct 02 '18 at 10:59
  • It looks like you have multiple misunderstandings here … 1. You can not un-blur descendants of a blurred element. (Reason for _“the popup window is blured”_) 2. Your element that you have blurred only has a solid background color, don’t expect to see too much of an effect when you “blur” that. This filter does _not_ work in a way that it blurs what is _behind_ the element, outside of it. (Which you seemed to expect, _“while the background is not”_) – misorude Oct 02 '18 at 11:49
  • So does it effect only to the lowest element, in this case the class "pinpopup"? – n.o.h. Oct 02 '18 at 13:04

0 Answers0