- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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)’ });
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.
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.
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.
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.