Bootstrap Snippet Hover effect using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover effect"
Bootstrap 3.3.0 Snippet by imsachin

Related: See More

Questions / Comments:

"Hover effect" Bootstrap 3.3.0 Snippet by imsachin

Related: See More

Questions / Comments:

"Hover effect"
Bootstrap 3.3.0 Snippet by imsachin