A Pen by Joe Watkins.

index.html

<div class="content">
  
  <div class="lock-box">
    <button class="trigger"><i class="fa fa-lock"></i></button>
    <form>
      <p><label for="username">Username</label>
      <input type="text" id="username" /></p>
      <p><label for="password">Password</label>
      <input type="text" id="password" /></p>
      <p><button type="submit">Submit</button></p>
    </form>
  </div>
  
</div>

Login-w-filter:blur();.markdown

Login w/filter:blur();

A Pen by Joe Watkins on CodePen.

License.

script.js

var $wrapper = $('.content'),
    $lockBox = $('.lock-box'),
    $trigger = $lockBox.find('.trigger'),
    $form = $lockBox.find('form'),
    activeClass = "on";

    $trigger.click(function(e){
      e.preventDefault();
      $form.toggleClass(activeClass);
      $wrapper.toggleClass(activeClass);
    });

style.scss

@import "compass";
.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 0;
  margin-left: 20px;
  margin-right: 20px;
  &:before {
    content: "";
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    background-image: url('http://flickholdr.com/1200/1200');
    background-size:cover;
    
  }
  &.on {
    &:before {
      -webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -o-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);
    }
  }
}

body {
  background:#315788;
}


.lock-box {
  text-align:center;
  margin-top:15px;
  .trigger {
    border-radius:60px;
    background:#fff;
    border:0px;
    font-size:2em;
    width:60px;
    height:60px;
    &:focus {
      outline:none;
    }
  }
  form {
    opacity:0;
    width: 200px;
    margin: 15px auto 0px;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    transition:all 1s ease-in-out;
    box-shadow:3px 3px 3px #666;
    &.on {
      opacity:1;
    }
    p {
      position:relative;
      text-align:left;
    }
    input {
      width:190px;
      padding:3px;
    }
    label {
      display:block;
      font-size:14px;
      color:#666;
    }
    button {
      width:195px;
      padding:10px;
      background:orange;
      color:white;
      border:0px;
      border-radius:5px;
    }
  }
}