Bootstrap Snippet PORTFOLIO IMAGES 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!DOCTYPE html>
<html>
<head>
  <base href="https://www.w3schools.com/images/" target="_blank">
</head>
<body>
<section id="portfolio-container" class="padding-60">
         <div class="container">
             <div class="row">
             <div class="col-md-12">
              <div class="text-center">
               <h1 class="padding-b-25">PORTFOLIO</h1>
              </div>
             </div>
            </div>
          <div class="row">
            <div class="text-center">
              <div class="toolbar mb2 mt2 padding-b-25">
              <button class="btn fil-cat active" href="" data-rel="all">All</button>
              <button class="btn fil-cat" data-rel="web">photography</button>
              <button class="btn fil-cat" data-rel="flyers">flyers</button>
              <button class="btn fil-cat" data-rel="bcards">corpporate</button>
              <button class="btn fil-cat" data-rel="advertising">advertising</button>
              </div> 
            </div> 
 
            <div style="clear:both;"></div>   
            <div id="portfolio">
            <div class="tile scale-anm web all advertising">
            <img src="https://lh3.googleusercontent.com/-ndZJOGgvYQ4/WM1ZI8dH86I/AAAAAAAADeo/l67ZqZnRUO8QXIQi38bEXuxqHfVX0TV2gCJoC/w424-h318-n-rw/thumbnail8.jpg" alt="" />
            </div>
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
/*Portfolio===============================*/
#portfolio {  
    margin: 1rem 0;
    -webkit-column-count: 3; 
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    -webkit-column-width: 33.33333333333333%;
    -moz-column-width: 33.33333333333333%;
    column-width: 33.33333333333333%;
}
#portfolio-container .tile { 
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;
}
#portfolio-container .tile:hover { 
}
#portfolio-container .scale-anm {
  transform: scale(1);
}
#portfolio-container p{ 
  padding:10px; 
  border-bottom: 1px #ccc dotted; 
  text-decoration: none; 
  font-family: lato; 
  text-transform:uppercase; 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
             
//<!--    portfolio  JS  =================    -->
       
        $(function() {
        var selectedClass = "";
        $(".fil-cat").click(function(){ 
        selectedClass = $(this).attr("data-rel"); 
     $("#portfolio").fadeTo(100, 0.1);
        $("#portfolio div").not("."+selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      $("."+selectedClass).fadeIn().addClass('scale-anm');
      $("#portfolio").fadeTo(300, 1);
    }, 300); 
        
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"PORTFOLIO IMAGES "
Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"PORTFOLIO IMAGES " Bootstrap 3.3.0 Snippet by sumi9xm

Related: See More

Questions / Comments:

"PORTFOLIO IMAGES "
Bootstrap 3.3.0 Snippet by sumi9xm