"Blog footer"
Bootstrap 3.0.0 Snippet by yanakonst

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="footer"> <div class="container"> <div class="row"> <h3 class="footertext">About Us:</h3> <br> <div class="col-md-4"> <center> <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains"> <br> <h4 class="footertext">מרכז תמיכה מחשובי</h4> <p class="footertext">You can thank all the crazy programming here to this guy.<br> </center> </div> <div class="col-md-4"> <center> <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="..."> <br> <h4 class="footertext">Artist</h4> <p class="footertext">All the images here are hand drawn by this man.<br> </center> </div> <div class="col-md-4"> <center> <img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="..."> <br> <h4 class="footertext">Designer</h4> <p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br> </center> </div> </div> <div class="row"> <p><center><a href="#">Contact Stuff Here</a> <p class="footertext">Copyright 2014</p></center></p> </div> </div> </div>
.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: