<button type="button" id="show-login" class="toggle-this">Login</button>
<div class="toggle-this top">
	<div class="container content">
		<input type="text" placeholder="username" class="input">
		<input type="password" placeholder="password" class="input">
		<button type="button">Login</button>
	</div>
	<div class="container blur">
		<img src="http://flkt.mx/pitaya/img/gallery/callejon.jpeg">
	</div>
</div>
<img src="http://flkt.mx/pitaya/img/gallery/callejon.jpeg">

body {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
img {
	object-fit: cover;
	position: fixed;
	min-width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
}
.container {
	width: 300px;
	height: 140px;
	padding: 30px 50px 60px;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	top: 100px;
	left: 45%;
	margin-left: -200px;
	transition: all .5s ease-in-out;
}
.container img {
	top: -100px;
	left: -47%;
}
.content {
	z-index: 2;
	box-shadow: 0 3px 10px rgba(0,0,0,0.3);
	border-radius: 5px;
}
.blur {
	-webkit-filter: blur(3px);
}
input {
	display: block;
	font-size: 16px;
	width: 80%;
	padding: 4% 10%;
	background: none;
	border: none;
	border-bottom: 1px solid #fff;
	color: #fff;
}
button {
	cursor: pointer;
	display: block;
	background: #ff3d00;
	border: none;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	height: 50px;
	margin-top: 20px;
	width: 100%;
	transition: all .5s ease-in-out;
}
button:hover {
	background: #ff5722;
}
::-webkit-input-placeholder {
	color: #fff;
}
#show-login {
	z-index: 3;
	position: relative;
	width: 100px;
	margin: 0 auto;
	top: 0;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

#show-login.top {
	top: -60px;
}
.top .container {
	top: -250px;
}

$( "button" ).click( function(){
	$( ".toggle-this" ).toggleClass( "top" )
});