"Grid Hover Effect with description"
Bootstrap 3.3.0 Snippet by sachinkul6185@gmail.com

<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; }

Related: See More


Questions / Comments: