Bootstrap Snippet hover effect using HTML CSS

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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"
    
    <div class="the-stripe">
    
        <div class="inner clearfix">
        
        
            <div class="box first">
            <h3>No 1 box</h3>
            </div>
        
        
            <div class="box middle">
            <h3>No 2 box</h3>
            </div>
        
            <div class="box end">
            <h3>No 3 box</h3>
            </div>
        
            <div class="well highlight">
            </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
.the-stripe {
background-color: rgb(162, 224, 255);
position: relative;
}
.inner {
width: 90%;
margin: 0 auto;
padding: 20px 0;
height: 200px;
position: relative;
}
.box {
float: left;
width: 29%;
text-align: center;
position: relative;
display: block;
height: 100%;
padding: 80px 2% 0; margin: 0px;
background: url(http://dl.dropbox.com/u/31546161/menu-icon.png) no-repeat center 10px;
z-index: 1;
}
.container {margin: 35px;}
.box:hover {opacity:0.5}
.well, .middle, .end {transition: all .5s ease}
.well.highlight
{
position: absolute;
left: 0%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"hover effect"
Bootstrap 3.2.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"hover effect" Bootstrap 3.2.0 Snippet by escapedlion

Related: See More

Questions / Comments:

"hover effect"
Bootstrap 3.2.0 Snippet by escapedlion