"Hover effect"
Bootstrap 3.3.0 Snippet by imsachin

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container-fluid"> <div class="container"> <div class="headtag"> <h2 class="text-center about-text"> Our Awesome Features</h2> <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="row"> <div class="col-md-4 text-c banner-small"> <div class="hotel-border"> <i class="fa fa-star"></i><br /><strong class="starti">Star Hotel</strong> <p class="text-01 formpadding2">All your flight search are made easy just to get you comfortably started</p> </div> </div> <div class="col-md-4 text-c banner-small"> <div class="hotel-border"> <i class="fa fa-handshake-o"></i><br /> <strong class="starti">services </strong> <p class="text-01 formpadding2">All your payment transactions data are well encrypted</p> </div> </div> <div class="col-md-4 text-c"> <div class="hotel-border"> <i class="fa fa-shield"></i><br /> <strong class="starti">Secure</strong> <p class="text-01 formpadding2">Use our endless options on endless cities and book flights securely</p> </div> </div> <div class="clearfix"></div> <div class="gap3"></div> </div> </div></div> <!--never-section--> never section <div class="container-fluid never-banner"> <div class="midnever"> <div class="container"> <h1>You Never Leave Us</h1><br/> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p><br/> <a href="#">View more</a> </div> </div> </div> <!--our-hotel--> <div class="container text-center"> <div class="headtag"> <h2 class="text-center about-text">Our Hotels</h2> <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="row"> <div class="col-md-3"> <div class="hotel-banner"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive banner-small imwidth" /> <div class="hotel-box"> <div class="hotel-box-content"> <h3>3 Day/4 Night</h3> <p>Save Upto $20</p> </div> </div> </div> </div> <div class="col-md-3"> <div class="hotel-banner"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive banner-small imwidth" /> <div class="hotel-box"> <div class="hotel-box-content"> <h3>3 Day/4 Night</h3> <p>Save Upto $25</p> </div> </div> </div> </div> <div class="col-md-3"> <div class="hotel-banner"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive banner-small imwidth" /> <div class="hotel-box"> <div class="hotel-box-content"> <h3>4 Day/5 Night</h3> <p>Save Upto $30</p> </div> </div> </div> </div> <div class="col-md-3"> <div class="hotel-banner"> <img src="https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg" class="img-responsive banner-small imwidth" /> <div class="hotel-box"> <div class="hotel-box-content"> <h3>3 Day/4 Night</h3> <p>Save Upto $20</p> </div> </div> </div> </div> </div> </div> <!--destination--> <div class="container mrt20" id="hotel-des"> <div class="headtag"> <h2 class="text-center about-text">Hotel Destinations</h2> <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> <div class="row"> <div class="col-md-4 banner-small"> <div class="hotel-des"> <img src="https://bestjquery.com/tutorial/product-grid/demo4/images/img-2.jpg" class="img-responsive imwidth"> <div class="hotel-content"> <h3 class="du">Dubai<span class="pull-right">Save upto <span class="rate"> $20 </span></span></h3> <p>United Arab Emirates<span class="pull-right"><i class="fa fa-angle-right"></i></span></p> </div> </div> </div> <div class="col-md-4 banner-small"> <div class="hotel-des"> <img src="https://bestjquery.com/tutorial/product-grid/demo4/images/img-2.jpg" class="img-responsive imwidth"> <div class="hotel-content"> <h3 class="du">Singapore<span class="pull-right">Save upto <span class="rate"> $25 </span></span></h3> <p>Singapore<span class="pull-right"><i class="fa fa-angle-right"></i></span></p> </div> </div> </div> <div class="col-md-4"> <div class="hotel-des"> <img src="https://bestjquery.com/tutorial/product-grid/demo4/images/img-2.jpg" class="img-responsive imwidth"> <div class="hotel-content"> <h3 class="du">New York<span class="pull-right">Save upto<span class="rate"> $20 </span></span></h3> <p>United States<span class="pull-right"><i class="fa fa-angle-right"></i></span></p> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
.card-body{padding:5px;background:#f1f1f1;width:280px;} .mrt20{margin-top:20px;} .card-title{font-size:22px;text-align:center;color:#e92056;} .starti{font-size: 1.5em;color: #fff;} .hotel-border:hover .starti{color:#e92056;} .hotel-border{padding: 20px 20px;background-color: #e92056;background-image: linear-gradient(0deg,#d40e44,#bf2e55,#e92056,#bd1743);color: #fff;transition:all linear 0.4s;} .hotel-border:hover{padding: 20px 20px;background-color:#fff;background-image: linear-gradient(0deg,#9e9d9d,#ffffff,#dcdcdc,#b7b7b7);color:#e92056;transition:all linear 0.4s;} .cont{color:#ffffff;font-size:20px;} .hotel-text{font-size:20px;} .about-text{color:#e92056;} .text-c { text-align: center; } .midnever{background: #696A88; padding: 5em 0em; opacity:0.8; text-align: center;} .midnever p{width:100%; margin: 0 auto; color: #fff; line-height: 1.8em; font-size: 1em;} .midnever h6 {font-size: 1em; color: #fff; margin: 0.6em 0em;} .midnever h1{font-size: 3em; color: #fff;} .midnever a{font-size: 1em; color: #fff; background: #e92056; padding: 1em 2em; display: inline-block; margin-top: 1em;box-shadow: 0px 0px 5px #000;} .midnever a:hover{text-decoration:none;} .caro-indi .active{color:#e92056;} .hotel-banner{position:relative;width:100%;} .hotel-box{position:absolute;top:50%;left:50%;width:100%;height:100%;background: #fff;transform:translate(-50%,-50%);opacity: 0.9;box-shadow: 0px 0px 5px #e92056;transition:all 0.5s ease-in-out;display:none;} .hotel-box p{opacity:0.9;font-size: 20px!important;font-weight:bold;color: #060606;margin-bottom: .5em!important;text-shadow: 0 0 4px #fff;} .hotel-box h3{opacity:0.9;font-size: 2em!important;color: #e92056;margin-bottom: .5em!important;text-shadow: 0 0 4px #fff;} .hotel-banner:hover .hotel-box{display:block;} .hotel-border:hover{animation:move 1s linear;} .hotel-border i{font-size:30px;} .hotel-box-content{position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%);} @keyframes move{ 0% {box-shadow:0px 0px #000;} } .hotel-des{box-shadow:0px 8px 15px rgba(123, 123, 123, 0.4117647058823529);} .du{font-size: 22px;line-height: 1.875rem;font-weight: 400;letter-spacing: normal;color: #e92056!important;margin-bottom: .5em!important;text-shadow: 0 0 5px #fff;margin:10px 0;} .hotel-content{padding:5px 15px;align-items: center;} .hotel-content i{font-size:20px;color:#e92056;font-weight:900;} .btn-diff{background:#fff;color:#e92056;box-shadow: 0 0 2px #000;} .blink{animation:blink1 0.5s infinite;} @keyframes blink1{ 0%{color:#000;} 10%{color:#e92056;} 30%{color:#000;} 50%{color:#e92056;} 80%{color:#000;} 100%{color:#e92056;} } .imwidth{width:100%;}

Related: See More


Questions / Comments: