Bootstrap Snippet Projets Portfolio using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
$(function(){
$('.panel').hover(function(){
        $(this).find('.panel-footer').slideDown(250);
    },function(){
        $(this).find('.panel-footer').slideUp(250); //.fadeOut(205)
    });
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Projets Portfolio"
Bootstrap 3.2.0 Snippet by Tomboasy

Related: See More

Questions / Comments:

"Projets Portfolio" Bootstrap 3.2.0 Snippet by Tomboasy

Related: See More

Questions / Comments:

"Projets Portfolio"
Bootstrap 3.2.0 Snippet by Tomboasy