"Blog footer"
Bootstrap 3.2.0 Snippet by omkumar19

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <hr> <footer> <div class="row"> <div class="col-lg-12"> <div class="col-lg-3 col-md-6"> <div class="container"> <div class="blog-content"> <div id="blog" class="row"> <div class="col-md-10 blogShort"> <h2>Career Counseling Event - December 2014</h2> <div class="article-content"> <div class="col-lg-3"> <div class="cuadro_intro_hover " style="background-color:#cccccc;"> <p style="text-align:center; margin-top:20px;"> <img src="http://placehold.it/500x330" 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;">Event</h3> <p>Basant High School, Ghorpadi</p> </div> </div> </div> </div> <article> <p> When we first started working with kids of seventh grade and above at a local government school , we had a very obvious realization – that the kids’ notion of their future was fuzzy and vague. They wanted to have interesting and lucrative careers, but didn’t know if their dreams were either feasible or attainable. In the absence of that clarity, their enthusiasm for education was bound to be half-hearted. It was imperative to show them the light at the end of the tunnel, and so we did. </p> </article> <a class="btn btn-blog pull-right marginBottom10" href="career-counseling-dec-14.html"> Read More </a> </div> </div> <div class="col-md-12 gap10"></div> </div> </div> </div> </div> </div> </div> </footer>
.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%; }

Related: See More


Questions / Comments: