Bootstrap Snippet 3 boxes 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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="container padding6em">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4 big_team_grid  big_team_gridf">
                    <div class="big_text text1-big">
                        <h3>01</h3>
                        <h5>NEW CLASSROOM TECHNOLOGY</h5>
                    </div>
                </div>
        <div class="col-md-4 col-sm-4 col-xs-4 big_team_grid  big_team_gridf">
                    <div class="big_text text1-big">
                        <h3>01</h3>
                        <h5>NEW CLASSROOM TECHNOLOGY</h5>
                    </div>
                </div>
        <div class="col-md-4 col-sm-4 col-xs-4 big_team_grid  big_team_gridf">
                    <div class="big_text text1-big">
                        <h3>01</h3>
                        <h5>NEW CLASSROOM TECHNOLOGY</h5>
                    </div>
                </div>      
                
    </div>
</div>
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
.padding6em {
    background: #333;
    padding: 6em;
 }
.big_text {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 3em 4em;
    position: relative;
    overflow: hidden;
    z-index: 9;
    box-shadow: 10px -10px 3px 3px rgba(0, 0, 0, 0.25);
}
.big_text h3 {
    font-size: 2em;
    color: #FCB941;
    margin-bottom: .5em;
}
.big_text h5 {
    font-size: 1.5em;
    color: #000;
    line-height: 1.8;
}
.big_text:before {
    content: '';
    background: #00b5b5;
    background: linear-gradient(to right, rgba(0, 128, 0, 0.7),rgba(0, 0, 255, 0.6),rgba(75, 0, 130, 0.6),rgba(238, 130, 238, 0.6),rgba(255, 0, 0, 0.6),rgba(255, 165, 0, 0.6),rgba(255, 255, 0, 0.6));
    position: absolute;
    width: 100%;
    height: 2%;
    left: 0;
    bottom: 0;
    z-index: -1;
        -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3 boxes hover effect"
Bootstrap 3.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"3 boxes hover effect" Bootstrap 3.0.0 Snippet by jeevan123456

Related: See More

Questions / Comments:

"3 boxes hover effect"
Bootstrap 3.0.0 Snippet by jeevan123456