<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"> <div class="row text-center"> <h2>Hover effect </h2> <p>Image caption with a text previewed in the bottom</p> </div> <div class="row"> <div class="col-lg-3"> <div class="cuadro_intro_hover " style="background-color:#cccccc;"> <p style="text-align:center;"> <img src="http://static.tumblr.com/166ab215c9a0bb3ba1b98e810652c3db/pjmcbps/OHEmr2kqz/tumblr_static_dsc_0298lol.jpg" class="img-responsive" alt=""> </p> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Nav</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="https://plus.google.com/u/0/100371904807783155711/posts" target="_blank"><span class="glyphicon glyphicon-plus"> INFO</span></a> </div> </div> </div> </div> <div class="col-lg-3"> <div class="cuadro_intro_hover " style="background-color:#cccccc;"> <p style="text-align:center;"> <img src="http://pixel.brit.co/wp-content/uploads/2014/08/724.jpg" class="img-responsive" alt=""> </p> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Mehra</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="https://plus.google.com/u/0/100371904807783155711/posts" target="_blank"><span class="glyphicon glyphicon-plus"> INFO</span></a> </div> </div> </div> </div> <div class="col-lg-3"> <div class="cuadro_intro_hover" style="background-color:#cccccc;"> <p style="text-align:center;"> <img src="http://www.photoaxe.com/wp-content/uploads/2014/11/food1.jpg" class="img-responsive" alt=""> </p> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Maan Sab</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="https://plus.google.com/u/0/100371904807783155711/posts" target="_blank"><span class="glyphicon glyphicon-plus"> INFO</span></a> </div> </div> </div> </div> <div class="col-lg-3"> <div class="cuadro_intro_hover " style="background-color:#cccccc;"> <p style="text-align:center;"> <img src="http://www.futurs-souhaitables.org/blog/wp-content/uploads/2015/02/1817e826f4775ec92fb3845a1a0c8a10_large.jpeg" class="img-responsive" alt=""> </p> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h3 style="border-top:2px solid white; border-bottom:2px solid white; padding:10px;">Hacker</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="https://plus.google.com/u/0/100371904807783155711/posts" target="_blank"><span class="glyphicon glyphicon-plus"> INFO</span></a> </div> </div> </div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,900,800,700,600); body{font-family: 'Raleway', sans-serif;} h2 { border-bottom: 10px solid red; font-family: 'Raleway', sans-serif; font-size: 65px; font-weight: 900; margin: 0 auto; padding: 20px 0 3px; text-align: center; text-transform: uppercase; width: 40.2%; } img { height: 200px !important; } .row.text-center p { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin: 3px 0 30px; text-transform: uppercase; } .h3, h3 { font-family: 'Raleway', sans-serif; font-size: 24px; text-transform: uppercase; } .btn-default { background: transparent none repeat scroll 0 0; border: 2px solid #fff; border-radius: 50px; text-shadow: 0 1px 0 #fff; font-family: 'Raleway', sans-serif; } .glyphicon { color: white;} .caption-text p { margin: 18px auto 13px; text-align: center; width: 91%; } .btn-default:focus, .btn-default:hover { background-color: red; background-position: 0 -15px; } .cuadro_intro_hover{ padding: 0px; position: relative; overflow: hidden; height: 200px; } .cuadro_intro_hover:hover .caption{ opacity: 1; transform: translateY(-150px); -webkit-transform:translateY(-150px); -moz-transform:translateY(-150px); -ms-transform:translateY(-150px); -o-transform:translateY(-150px); } .cuadro_intro_hover img{ z-index: 4; } .cuadro_intro_hover .caption{ position: absolute; top:150px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; width: 100%; } .cuadro_intro_hover .blur{ background-color: rgba(0,0,0,0.7); height: 300px; z-index: 5; position: absolute; width: 100%; } .cuadro_intro_hover .caption-text{ z-index: 10; color: #fff; position: absolute; height: 300px; text-align: center; top:-20px; width: 100%; }