"Hover Effect Grid"
Bootstrap 3.0.0 Snippet by sachinkul6185@gmail.com

Post to Facebook Tweet this

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.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">
<div class="row">
<div class="three">
<div class="image-wrap">
<img src="http://www.deyorcamps.com/common/images/user_22607/91.jpg" alt="" />
<div class="absolut-onhover">
<div class="vertical-align">
<h5>support</h5>
<a href="#" class="btn btn-info">Explore</a>
</div>
</div>
</div>
</div>
<div class="three">
<div class="image-wrap">
<img src="http://www.deyorcamps.com/common/images/user_22607/91.jpg" alt="" />
<div class="absolut-onhover">
<div class="vertical-align">
<h5>support</h5>
<a href="#" class="btn btn-info">Explore</a>
</div>
</div>
</div>
</div>
<div class="three">
<div class="image-wrap">
<img src="http://www.deyorcamps.com/common/images/user_22607/91.jpg" alt="" />
<div class="absolut-onhover">
<div class="vertical-align">
<h5>support</h5>
<a href="#" class="btn btn-info">Explore</a>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
*{transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}
.three{width:33.3333%;float:left;text-align: center;}
.three img{width:100%;}
.image-wrap{width:100%; float:left;height:243px;overflow:hidden;position:relative;}
.absolut-onhover h5{margin:0px;padding:10px 0px;color:#ff6600;font-size:22px; line-height:30px;text-transform:capitalize;}
.absolut-onhover {
background: rgba(0,0,0,.8);
width: 100%;
height: 100%;
position: absolute;
top: 80%;
left: 0; padding:0 0px;
text-align: center;
}
.image-wrap .vertical-align {
top:45px;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.image-wrap:hover .absolut-onhover{top:0px;}
.image-wrap:hover .vertical-align{top:50%;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: