Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Blur Effect on Body Except on one element.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #273713
    ahmad44
    Participant

    I have a requirement of applying blur on complete page except one element. So what I did is that I applied Blur on complete Body element and I tried to remove it from the required element. But I noticed that Blur is not being applied of each element of page but it is only getting applied on body element so It doesn’t matter if i apply 0px blur on my element what should I do. I just want my complete page Blur except one element including its childs. This is what i’ve tried.

    $(‘body’).css({ “-webkit-filter”: ‘blur(2px)’, “-moz-filter”: ‘blur(2px)’, “-o-filter”: ‘blur(2px)’, “-ms-filter”: ‘blur(2px)’, “filter”: ‘blur(2px)’ });
    $(‘#resetCard’).css({ “-webkit-filter”: ‘blur(0px)’, “-moz-filter”: ‘blur(0px)’, “-o-filter”: ‘blur(0px)’, “-ms-filter”: ‘blur(0px)’, “filter”: ‘blur(0px)’ });

    #273715
    Pogany
    Participant

    The idea is to put the not blurred element outside the blurred one, something like this:

    https://codepen.io/giaco/pen/rKEGxG

    If this doesn’t help please create a codepen showing what exactly you want to achieve.

    #273717
    ahmad44
    Participant

    See this I want div b and its inner elements not to be blured. Also I want to do this on some kind of action we can use Jquery.

    https://codepen.io/ahmad-bukhari/pen/WyqMmO

    #273724
    Pogany
    Participant

    The fact is that it’s not possible to blur the parent and “unblur” the child since the blur will automatically apply to the child element. ( The same as with opacity). The only solution to your problem is to put the div.b outside the blurred div.a.
    Next you have to set div.a{position:relative;} and div.b{position:absolute;} so that you can position div.b whereever you want.

    #273734
    ahmad44
    Participant

    Actually its not that simple for me to make b element position absolute. Is there any other way of achieving this, other then using blur filter. All I want to pop my one element out and unfocus rest of the body.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.