<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 ----------> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <div class="container"> <div class="row"> <!-- Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/600x460" alt="First slide"> </div> <div class="item"> <img src="http://placehold.it/600x460" alt="Second slide"> </div> <div class="item"> <img src="http://placehold.it/600x460" alt="Third slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>NOM DU PROJET</span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Vous en voulez un pareil ?</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Estimation gratuit!</a></div> </div> </div><!-- /header-text --> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- /carousel --> </div> </div> </div> <div class="container liste_projets" > <div class="row"> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <a href="#" data-toggle="modal" data-target="#myModal"><img src="http://placehold.it/300x230" alt=""></a> </div> <div class="panel-footer">Titre du projet</div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Titre du projet</div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Titre du projet</div> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Nom du projet</div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Nom du projet</div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Nom du projet</div> </div> </div> </div> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Nom du projet</div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Nom du projet</div> </div> </div> <div class="col-md-4 col-sm-6 col-xs-6 projet"> <div class="panel panel-default text-center"> <div class="panel-body"> <img src="http://placehold.it/300x230" alt=""> </div> <div class="panel-footer">Nom du projet</div> </div> </div> </div>

.liste_projets{max-width:820px} .panel-default{ text-align:center; cursor:pointer; font-family: 'Raleway',sans-serif; position:relative; margin:0px -15px; border-radius:0px!important; padding:0px!important } .panel-default > .panel-body{padding:0px!important} .panel-default > .panel-footer { color: #fff; background-color: #47c8ed; display:none; position: absolute; width:100%; bottom:0px; border-radius:0px!important; border:none; } .panel-default i{ font-size: 5em; } .projet{padding:0px} body.modal-open .liste_projets{ -webkit-filter: blur(7px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px); } .close{font-size:50px; font-weight: 100;} .modal-backdrop {background: #f7f7f7;} /* Carousel Styles */ .modal .container{width:800px} .carousel-indicators .active { background-color: #2980b9; } .carousel-inner {text-align: center!important;} .carousel > .item {width:600px!important; text-align: center!important} .carousel-inner img { width: 100%; max-height: 500px } .carousel-control { width: 0; } .carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; } .carousel-control.left span { padding: 15px; } .carousel-control.right span { padding: 15px; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; color:#333; font-weight: 100!important; } .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { left: -35px; font-weight: 100; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { right: -5px; } .carousel-control.left span, .carousel-control.right span { } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 20%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #fff; } .header-text h2 { font-size: 40px; } .header-text h2 span { background-color: #2980b9; padding: 10px; } .header-text h3 span { background-color: #000; padding: 15px; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-theme { color: #fff; background-color: transparent; border: 2px solid #fff; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #fff; border-color: #fff; }

$(function(){ $('.panel').hover(function(){ $(this).find('.panel-footer').slideDown(250); },function(){ $(this).find('.panel-footer').slideUp(250); //.fadeOut(205) }); })