Hover Login Bootstrap template, demonstrating a hover login form

<div class="container">  
    <div class="row">
        <div class="col-lg-12">
            <div class="form_hover " style="background-color: #cccccc;">
                <p style="text-align: center; margin-top: 20px;">
                    <i class="fa fa-gears" style="font-size:187px;"></i>
                </p>
                <div class="header">
                    <div class="blur"></div>
                    <div class="header-text">
                        <div class="panel panel-primary" style="height:320px;">
                            <div class="panel-heading">
                                <h3 style="background-color:#428BCA; color:white; padding:10px;">
                                    <i class="fa fa-arrows-v"></i>    Login Form    <i class="fa fa-arrows-v"></i></h3>
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <input type="text" class="form-control input-lg" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control input-lg" placeholder="Password">
                                </div>                                
                                <div class="form-group">
                                    <button class="btn btn-primary btn-lg btn-block">Sign In</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
<style>
    .form_hover {
        padding: 0px;
        position: relative;
        overflow: hidden;
        height: 300px;
    }

        .form_hover:hover .header {
            opacity: 1;
            transform: translateY(-250px);
            -webkit-transform: translateY(-250px);
            -moz-transform: translateY(-250px);
            -ms-transform: translateY(-250px);
            -o-transform: translateY(-250px);
        }

        .form_hover img {
            z-index: 4;
        }

        .form_hover .header {
            position: absolute;
            top: 250px;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            transition: all 0.3s ease;
            width: 100%;
        }

        .form_hover .blur {            
            height: 300px;
            z-index: 5;
            position: absolute;
            width: 100%;
        }

        .form_hover .header-text {
            z-index: 10;
            color: #fff;
            position: absolute;
            height: 300px;
            text-align: center;
            top: -20px;
            width: 100%;
        }
</style>