"Nightfall | Login Form With Good Hover Effect"
Bootstrap 3.3.0 Snippet by virajp

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Author: ArrayForm <!-- Author: ArrayForm Author URL: http://arrayform.com --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div class="main" style="padding:2%;margin-top:5%;"> <div class="col-lg-12"> <div class="container"> <div class="col-lg-4"></div> <div class="col-lg-4"> <div class="row grids text-center"> <div class="view view-tenth"> <!-- <a href="single.html">--> <div class="inner_content clearfix"> <div class="product_image"> <img src="http://www.arrayform.com/wp-content/uploads/2017/02/user@2x.png" class="img-responsive" alt="" style="margin:0% auto;"/> </div> <div class="label-product"> <span class="new">USER LOGIN</span> </div> <div class="mask" style="width:100% !important;"> <h2>Welcome User</h2> <div class="main"> <form> <input type="text" class="text" value="E-mail address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'E-mail address';}" > <input type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"> <div class="submit"><input type="submit" onclick="myFunction()" value="Sign in" ></div> <div class="clearfix"></div> </form> </div> </div> </div> </div> </div> <!-- </a> --> </div> </div> <div class="col-lg-4"></div> </div> <div class="col-lg-12"> <div class="footer"> <p> © 2016 All Rights Reserved | Design by <a href="http://www.arrayform.com/">ArrayForm</a></p> </div> </div> </div> </body> </html>
/** Author: ArrayForm Author URL: http://arrayform.com **/ h4, h5, h6, h1, h2, h3 {margin-top: 0;} ul, ol {margin: 0;} p {margin: 0;} html, body{ font-family: 'Open Sans', sans-serif; background:#F6F6F6; background-image:url('http://www.arrayform.com/wp-content/uploads/2017/02/back.jpeg'); background-attachment: fixed; background-position: center; background-size: cover; margin:0; padding:0%; } body a{ transition:0.5s all; -webkit-transition:0.5s all; -moz-transition:0.5s all; -o-transition:0.5s all; -ms-transition:0.5s all; } .view { overflow: hidden; position: static; text-align: center; cursor: default; } .view .mask,.view .content { position: absolute; overflow: hidden; top: 0; left: 0; height:auto; } .view img { display: block; position: relative; } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0; } .view .main { font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; } .info { display: inline-block; text-decoration: none; color: #fff; font-size:3em; /*padding:10%;*/ } .view-tenth img { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -o-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .view-tenth .mask { /* background-color:#dcbc86;*/ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-tenth h2 { border-bottom: 1px solid #E9C78C; background: transparent; margin:40px 40px 0px 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); color: #fff; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-tenth .main { color: #fff; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .view-tenth.info { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear; } .view-tenth:hover img { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; } .view-tenth:hover span{ opacity:0; } .view-tenth:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .view-tenth:hover h2,.view-tenth:hover .main,.view-tenth:hover.info { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .label-product { position: relative; } .product_container { margin-top: 1em; } .product_container .main{ font-size:1.8em; font-weight:700; text-transform:uppercase; margin: 1.5em 0 0.6em; font-family: 'Open Sans Condensed', sans-serif; } .product_container .main a{ color:#000; } .product_container .main a:hover{ color:#F94B4B; text-decoration:none; } .product_container p{ color: #999; font-size: 1.1em; } .label-product > span { font-size: 15px; text-transform: uppercase; display: inline-block; position: absolute; left:0px; top:-80px; color: #fff; padding:10px; background:#F94B4B; } .grid_icon:hover{ background:#00B895; } .reservation{ background: #FFF; padding:5em 0; } #main-reservation-text .main{ font-size: 1.8em; font-weight:700; text-transform: uppercase; display: inline-block; color: #555; font-family: 'Open Sans Condensed', sans-serif; } #main-reservation-undertext p { font-weight: 300; color: #fff; margin-top: 12px; display: inline-block; font-size: 0.7em; text-transform: none; } #reservation-button { color: #fff; border: 2px solid #fff; padding: 10px 26px; margin-top: 0px; font-size: 20px; display:inline-block; float:right; font-weight:800; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; cursor: pointer; background-color:#00B895; } /* Effect 7: second border slides up */ /***********************************************************/ .btns{ background-color:#000; color:#FFF; text-transform:none; font-size:18px; padding:2%; cursor:pointer; opacity:0.8; width:auto; border:#FFF solid 2px; border-radius:0.3em; -webkit-border-radius:0.3em; -moz-border-radius:0.3em; -o-border-radius:0.3em; -ms-border-radius:0.3em; } .btns:hover{ background-color:#CCCCCC; color:#000; } .inner-content { margin-top: 3em; } .main-inner { background: #fff; padding: 3em; border-top-left-radius: 0.3em; -o-border-top-left-radius: 0.3em; -moz-border-top-left-radius: 0.3em; -webkit-border-top-right-radius: 0.3em; border-top-right-radius: 0.3em; -o-border-top-right-radius: 0.3em; -moz-border-top-right-radius: 0.3em; } h3.tittle { text-align: center; margin-bottom: 1em; text-transform: uppercase; color: #34495E; font-size: 1.6em; } /*--main--*/ .new { text-align: center; margin-top: 1em; } .new h3 a { font-size:0.8em; font-weight: 600; color: #626E79; text-decoration: none; display: block; font-family: 'Lato', sans-serif; } .main{ border-top-left-radius: 0.3em; -o-border-top-left-radius: 0.3em; -moz-border-top-left-radius: 0.3em; -webkit-border-top-right-radius: 0.3em; border-top-right-radius: 0.3em; -o-border-top-right-radius: 0.3em; -moz-border-top-right-radius: 0.3em; } .main input[type="text"],.main input[type="password"]{ width: 100%; padding: 1em 4em 1em 1em; color: #858282; font-size: 16px; outline: none; background: #fff; font-weight: 500; border: 2px solid #bec3c7; font-family: 'Open Sans', sans-serif; border-radius: 0.3em; -o-border-radius: 0.3em; -moz-border-radius: 0.3em; margin: 0.7em 0; background: url("../images/mail.png") no-repeat 296px 18px #fff; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } .main input[type="password"]{ background: url("../images/lock.png") no-repeat 296px 18px #fff; } .main input[type="text"]:hover,.main input[type="password"]:hover{ border: 2px solid #9E241A; } .submit { text-align: center; margin-top: 1em; } .main input[type="submit"]{ font-size: 17px; font-weight: 600; color: #fff; cursor: pointer; outline: none; padding: 15px 15px; width: 48%; border: none; background:#D1392D; border-radius: 0.3em; -o-border-radius: 0.3em; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; text-transform: uppercase; } .main input[type="submit"]:hover,.second-one input[type="submit"]:hover{ background:#9E241A; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -o-transition: 0.5s all; } /*----footer-----*/ .footer { text-align: center; margin:10px 10px 5px 10px; padding-top:25%; color:#fff; position:relative; } .footer p { color: #fff; font-size: 16px; font-weight:600; } .footer a { color: #fff; } .footer a:hover { color:#1cbdda; } /*----//footer-----*/ @media screen and (max-width:1024px){ .label-product{ margin-left:34%; } } @media screen and (max-width:991px){ .label-product{ margin-left:28%; } } @media screen and (max-width:768px){ .footrt{ padding-top:30%; } } @media screen and (max-width:640px){ .label-product{ margin-left:18%; } .footer{ padding-top:35%; } } @media screen and (max-width:460px){ .label-product{ margin-left:14%; } } @media screen and (max-width:360px){ .label-product{ margin-left:0%; } .footer{ padding-top:38%; } }

Related: See More


Questions / Comments: