hidden login form HTML
<p>I was woundering if it's possible to create a hidden form with HTML and CSS? Maybe Javascript if needed?</p>

<p>I was thinking a form with only password so when you enter a webpage the only thing you will se is an image enter by a div tag. And I want to make it possible to enter a password without showing it so when you click enter you can login if it is the right password. </p>

<p>I was thinking something like this:</p>

<pre><code>&lt;div id="overlay"&gt;
&lt;form method="POST" action="index.php"&gt;
&lt;input type="password" name="pw" AUTOFOCUS&gt;
&lt;/form&gt;
&lt;/div&gt;

#overlay {          
background: url(http://link/ex.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
</code></pre>

<p>So the only thing the user see is the image from the div tag <strong>Overlay</strong> but the user can input a password and click enter to login. This I do not want to been seen so only users land on this page and know that u can login do it. Other who see this page will think whatthef*ck.</p>

<p>I was thinking, is it possible to do this with z-index?
Maybe if overlay z-index is 1 
and another div for the form, example: #form and the z-index for #form i like -2 ?</p>