Bootstrap Snippet Pricing table 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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
        <div class="row text-center">
            <div class="col-md-12">
                <h2>Choose your plan</h2>
            </div>
            <div class="col-md-12" style="margin-top: 20px;">
                <div class="pricing-table">
                    <div class="panel panel-primary" style="border: none;">
                        <div class="controle-header panel-heading panel-heading-landing">
                            <h1 class="panel-title panel-title-landing">
                                Premium
                            </h1>
                        </div>
                        <div class="controle-panel-heading panel-heading panel-heading-landing-box">
                            Best Choice
                        </div>
                        <div class="panel-body panel-body-landing">
                            <table class="table">
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>30+ Accounts</td>
                                </tr>
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>150+ Projects</td>
                                </tr>
                                <tr>
                                    <td width="50px"><i class="fa fa-check"></i></td>
                                    <td>Lead Required</td>
                                </tr>
                            </table>
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
.pricing-table {
    max-width: 368px;
    margin: 0 auto;
    transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    border-radius: 0px;
}
.pricing-table:hover {
    box-shadow: 0px 0px 30px rgba(0,0,0, .2);
}
.pricing-table:hover>.panel-footer-landing {
    box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset;
    -webkit-transition:  all .3s ease;
}
.pricing-table:hover>.panel>.panel-body-landing {
    background: #5CB85C;
    -webkit-transition:  all .3s ease;
}
.pricing-table:hover>.panel>.panel-heading-landing-box {
    background: #f0f0f0 !important;
    color: #333 !important;
    -webkit-transition:  all .3s ease;
}
.pricing-table:hover>.panel>.controle-header {
    background: #5CB85C !important;
    /*    border: solid 2px #5CB85C !important;*/
    -webkit-transition:  all .3s ease;
}
.pricing-table:hover>.panel>.panel-footer {
    background: #5CB85C !important;
    /*    border: solid 2px #5CB85C !important;*/
    -webkit-transition:  all .3s ease;
}
.pricing-table:hover>.panel>.panel-footer>.btn {
    border: solid 1px #fff !important;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Pricing table hover effect"
Bootstrap 3.3.0 Snippet by infvarun

Related: See More

Questions / Comments:

"Pricing table hover effect" Bootstrap 3.3.0 Snippet by infvarun

Related: See More

Questions / Comments:

"Pricing table hover effect"
Bootstrap 3.3.0 Snippet by infvarun