<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">
<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>
* {
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;
-ms-transform-origin: 70% 0;
transform-origin: 70% 0;
}
.imghvr-fold-up:hover figcaption {
-webkit-transform: rotateX(0) translate3d(0,0,0) scale(1);
transform: rotateX(0) translate3d(0,0,0) scale(1);
opacity: 1;
-webkit-transition-delay: .21s;
transition-delay: .21s;
}
