"Blog footer"
Bootstrap 3.2.0 Snippet by andras2001

<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="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;">THIS IS H3</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="#"><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; 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;">THIS IS H3</h3> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default" href="#"><span class="glyphicon glyphicon-plus"> INFO</span></a> </div> </div> </div> </div> <div class="col-lg-3 col-md-6"> <h3>Categories:</h3> <ul> <li><a href=""><i class="fa fa-file"></i> News</a></li> <li><a href=""><i class="fa fa-android"></i> Android</a></li> <li><a href=""><i class="fa fa-code"></i> C#</a></li> <li><a href=""><i class="fa fa-code"></i> Java</a></li> <li><a href=""><i class="fa fa-book"></i> Books</a></li> <li><a href=""><i class="fa fa-globe"></i> Web</a></li> <li><a href=""><i class="fa fa-windows"></i> Windows</a></li> </ul> </div> <div class="col-lg-3 col-md-6"> <h3>Contact:</h3> <p>Have a question or feedback? Contact me!</p> <p><a href="" title="Contact me!"><i class="fa fa-envelope"></i> Contact</a></p> <h3>Follow:</h3> <a href="" id="gh" target="_blank" title="Twitter"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> Twitter</a> <a href="" target="_blank" title="GitHub"><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-github fa-stack-1x"></i> </span> GitHub</a> </div> <br/> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/hu_HU/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> <a href="https://twitter.com/share" class="twitter-share-button" data-url="">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <div class="g-plusone" data-annotation="inline" data-width="300" data-href=""></div> <!-- Helyezd el ezt a címkét az utolsó +1 gomb címke mögé. --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <br/> <hr> <p>Copyright © Your Website | <a href="">Privacy Policy</a> | <a href="">Terms of Use</a></p> </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:

Not good. Wrong col-class declaration and styles in the HTML file (*omg* this is 1999)

Der Volksfreund (0) - 1 year ago - Reply 0


thaks for this nice project

Juan Camilo (0) - 3 years ago - Reply 0


What would be awesome if the author can provide us with his native language so that we can translate his comments and be able to modify the variables!

Even better would be that the admin of this site not allow other languages on the snippets !

Charles Harris (0) - 3 years ago - Reply 0


nice!

[CorVayne] #TeamExitoso (0) - 3 years ago - Reply 0