Portfolio Filter Gallery

index.html

<div class="container">
  <div class="row">
    <div class="col-lg-12">
    <div class="portfolioFilter clearfix">
      <a href="#" data-filter="*" class="current">All Categories</a>
      <a href="#" data-filter=".webTemplates">Web Templates</a>
      <a href="#" data-filter=".logos">Logos</a>
      <a href="#" data-filter=".drawings">Drawings</a>
      <a href="#" data-filter=".ui">UI Elements</a>
    </div>
      </div>
    <div class="portfolioContainer">

      <div class="webTemplates objects">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/cc99b535336825.Y3JvcCwxMzk1LDEwOTEsMCw3ODA.png" alt="image">
      </div>

      <div class="drawings places">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/d4cfa934191261.Y3JvcCw2MTMsNDc5LDQsMjA0.jpg" alt="image">
      </div>

      <div class="webTemplates food">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/11893193.5482088f6f391.png" alt="image">
      </div>

      <div class="logos drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/be4b9728308865.55b92edb950fc.jpg" alt="image">
      </div>

      <div class="webTemplates">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/12963199.548365055868a.png" alt="image">
      </div>

      <div class="ui">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/20342607.5434c04b49254.png" alt="image">
      </div>

      <div class="drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/b11bbb26474383.555f91fd42584.jpg" alt="image">
      </div>

      <div class="webTemplates">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/14385875.548573dae7a09.jpg" alt="image">
      </div>

      <div class="drawings">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/14569777.5485b3876a1b9.png" alt="image">
      </div>
      <div class="logos">
        <img src=" https://mir-s3-cdn-cf.behance.net/projects/202/1d854a24500155.5505cccd057a4.jpg" alt="image">
      </div>
      <div class="ui">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/f9b95b26406487.555cc1fded76f.jpg" alt="image">
      </div>
      
      <div class="logos">
        <img src="https://mir-s3-cdn-cf.behance.net/projects/202/181a7b35469661.Y3JvcCw3NjUsNTk5LDY3LDA.png" alt="image">
      </div>
      
     
    </div>
  </div>
</div>

portfolio-filter-gallery.markdown

Portfolio Filter Gallery

A Pen by Pramod Kumar on CodePen.

License.

script.js

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
 
    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');
 
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>

style.css

body {
  font-family: Arial;
}

a:focus {
  outline: none;
}

.portfolioFilter {
  padding: 15px 0;
}

.portfolioFilter a {
  margin-right: 6px;
  color: #666;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 4px 15px;
  border-radius: 50px;
  display: inline-block;
}

.portfolioFilter a.current {
  background: #1e1e1e;
  border: 1px solid #1e1e1e;
  color: #f9f9f9;
}
.portfolioContainer{
  border: 1px solid #eee;
  border-radius: 3px;
}
img {
  margin: 5px;
  max-width:100%;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />