<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <footer> <div class="container"> <hr> <div class="row"> <div class="col-lg-12"> <div class="col-lg-3 col-md-6"> <div class="container"> <div class="col-lg-3 col-md-6"> <h3>Quelques chiffres::</h3> <ul> <li><a href="#"><i class="fa fa-file"></i> Nombre de membres inscrits:X </a></li> <li><a href="#"><i class="fa fa-android"></i> Nombre de topcs forum:X</a></li> <li><a href="#"><i class="fa fa-code"></i> Nombre de messages postés:X</a></li> </ul> </div> <div class="col-lg-3 col-md-6"> <h3>Informations:</h3> <ul> <li><a href="#"><i class="fa fa-file"></i> Conditions générales d'utilisations</a></li> <li><a href="#"><i class="fa fa-android"></i> Politique de confidentialitée</a></li> <li><a href="#"><i class="fa fa-code"></i> Liste des membres</a></li> </ul> </div> <div class="col-lg-3 col-md-6"> <h3>Contactre nous:</h3> <p>Pous une question ou une remarque sur le site web:</p> <p><a href="" title="Contact me!"><i class="fa fa-envelope"></i> Contact</a></p> </div> <div class="col-lg-3 col-md-6"> <h3>Reseaux sociaux:</h3> <p>rejoignez nous pour ne rater aucunes informations:</p> <a href="https://www.facebook.com/bootsnipp"><i id="social" class="fa fa-facebook-square fa-3x social-fb"></i></a> </div> </div> </div> </div> </div> <div class="decale"> <p> <hr> <span class="glyphicon glyphicon-copyright-mark"></span> Copyright Zrtcommunity 2015 </br> Site réalisé par <a href="#">Nydareld</a> </p> </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%; } .decale{ padding-left: 70px; } #social:hover { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); } #social { -webkit-transform:scale(0.8); /* Browser Variations: */ -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; } .social-fb:hover { color: #3B5998; } .social-tw:hover { color: #4099FF; } .social-gp:hover { color: #d34836; } .social-em:hover { color: #f39c12; }