title: Blur and unblur the elements on my html
body: <p>what I'm trying to do is to create a login page which goes in front of the actual webpage. From research online, I found out that I can make the actual webpage blurred before the user login. Below is the coding:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="login"&gt;
          &lt;form class="form-signin"&gt;
              &lt;span id="reauth-email"&gt;&lt;h2&gt;Login&lt;/h2&gt;&lt;/span&gt;
              &lt;input type="email" id="inputEmail" placeholder="Email address"&gt;
              &lt;input type="password" id="inputPassword" placeholder="Password"&gt;
              &lt;div id="remember" class="checkbox"&gt;
              &lt;/div&gt;
              &lt;button class="btn btn-lg btn-primary btn-block btn-signin" id="btn_login" type="submit"&gt;Sign in&lt;/button&gt;
          &lt;/form&gt;    
  &lt;/div&gt;
  &lt;div id="main"&gt;
      &lt;div id="div1"&gt;12345&lt;/div&gt;
      &lt;div id="div2"&gt;67890&lt;/div&gt;
      &lt;div id="div3"&gt;abcde&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#div1{height:30px; width:400px;background-color:red}
  #div2{height:300px; width:400px; background-color:yellow}
  #div3{height:30px; width:400px; background-color:green}
  #main
  {-webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100px;
  height: 100px;
  background-color: #ccc;}
  #login{position:relative; top:180px; left:70px; width:35%; background-color: white; border:2px solid black; padding:0px 20px 20px 20px; border-radius: 10px; z-index: 1000;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vL0fbrj4/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>What I want to know is, how come my "main" div will not go up to the top of the page (it left a white space on top) after I placed the "login" div on the middle of the page?</p>
  
  <p>And how do we unblurred it after the user login?</p>