html - Blur effect to whole website but one whild element -


i've added .blur class body tag blur whole website.

css

.blur {     filter: blur(1px);     filter: url("blur.svg#gaussian_blur");     -webkit-filter: blur(1px);     -o-filter: blur(2px); }

html

<body class="blur"> ... <div class="mustbeclear"></div> <!-- somewhere in page--> ... </body>

how keep .mustbeclear class not blured.

i've tried 

.mustbeclear{     filter: none;      -webkit-filter: none;     -o-filter: none; }

but, not work!

what trying not possible. because svg filters applied entire element @ once, cannot selectively "undo" filter single child element.

what recommend instead blur element want blurred, can use absolute positioning on element on top not have blur effect.

here live example illustrate i'm talking about:

.container {      position: relative;      top: 50px;      left: 50px;  }    .blur {      filter: blur(5px);      -webkit-filter: blur(5px);      -o-filter: blur(5px);  }    #text {      position: absolute;      left: 50px;      top: 50px;  }
<div id="container">      <div class="blur">  <img src="http://i.imgur.com/5lgqy2p.jpg?1" />      </div>      <div id="text">not blurred text</div>  </div>


Comments

Post a Comment