Pure css show/hide withour js (only tested in Chrome)

Pure css show/hide without js with a click event example, a maintained click example and a hover example.

HTML

<input type="radio" id="show" name="group">
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<div class="header-login" id="content">

  <a href="#" class=""><i class="fa fa-power-off"></i> Login</a>

  <div>
    <form action="login" method="POST">
      <input type="text" name="email" class="form-control" placeholder="Email">
      <input type="password" name="password" autocomplete="off" class="form-control" placeholder="Password">
      <input type="submit" name="submit" class="btn btn-default" value="Login">
      <a href="forgot-password" class="btn btn-link">Forgot Password?</a>
    </form>
  </div>

</div>

CSS

label {
  position: absolute;
  top: 0;
  left: 0
}

input#show,
input#hide {
  display: none;
}

#content {
  display: block;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
  opacity: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}

input#show:checked ~ .show:before {
  content: ""
}

input#show:checked ~ .hide:before {
  content: "Hide"
}

input#hide:checked ~ .hide:before {
  content: ""
}

input#hide:checked ~ .show:before {
  content: "Show"
}

input#show:checked ~ #content {
  opacity: 1;
  font-size: 100%;
  height: auto;
}

input#hide:checked ~ #content {
  display: block;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
  opacity: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}


/* extra */

#content,
#content1,
#content2 {
  float: left;
  margin: 100px auto;
}