"Grid Hover Effect with description"
Bootstrap 3.3.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="//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 ---------->
<div class="container" style="margin-top:50px;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<figure class="imghvr-fold-up">
<img src="http://www.mrwallpaper.com/wallpapers/Lake-in-Mountains.jpg" class="img-responsive">
<figcaption>
<h3>Course Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam atque, nostrum veniam consequatur libero fugiat, similique quis.</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<figure class="imghvr-fold-up">
<img src="http://www.mrwallpaper.com/wallpapers/Lake-in-Mountains.jpg" class="img-responsive">
<figcaption>
<h3>Course Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam atque, nostrum veniam consequatur libero fugiat, similique quis.</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<figure class="imghvr-fold-up">
<img src="http://www.mrwallpaper.com/wallpapers/Lake-in-Mountains.jpg" class="img-responsive">
<figcaption>
<h3>Course Name</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam atque, nostrum veniam consequatur libero fugiat, similique quis.</p>
</figcaption>
<a href="#"></a>
</figure>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
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
* {
transition: all .5s ease;
-moz-transition: all .5s ease;
-webkit-transition: all .5s ease;
}
.imghvr-fold-up {
position: relative;
display: inline-block;
margin: 0;
max-width: 100%;
background-color: #2266a5;
color: #fff;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translateZ(0);
transform: translateZ(0);
margin-top:15px;
}
.imghvr-fold-up figcaption {
background-color: #135796;
padding: 30px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
-webkit-transform: rotateX(-90deg) translate3d(0,-50%,0) scale(.6);
transform: rotateX(-90deg) translate3d(0,-50%,0) scale(.6);
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.imghvr-fold-up>img {
-webkit-transform-origin: 70% 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Pro
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: