Portfolio Gallery With Filtering Categories

I tried edit Portfolio gallery with filtering categories from https://www.w3schools.com/howto/howto_js_portfolio_filter.asp I wanted to add animation by choosing category but I

Solution 1:

transition attribute will not work on display attribute. But you can add the transition by setting below CSS using height and visibility

/* Create three equal columns that floats next to each other */.column {
    float: left;
    width: 33.33%;
    visibility: hidden;
    height: 0px;
    -webkit-transition: all 600mscubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600mscubic-bezier(0.645, 0.045, 0.355, 1); 
}

/* The "show" class is added to the filtered elements */.show {
  visibility: visible;
  height: 325px;
}

But here you must define the height of the card that being shown here.

Solution 2:

i can't comment so i had to do it this way.

i used this code for my portfolio and worked great!

HTML

<divclass="container"><divclass="row"><divclass="col-lg-12"><divclass="portfolioFilter clearfix"><ahref="#"data-filter="*"class="current">All Categories</a><ahref="#"data-filter=".webTemplates">Web Templates</a><ahref="#"data-filter=".logos">Logos</a><ahref="#"data-filter=".drawings">Drawings</a><ahref="#"data-filter=".ui">UI Elements</a></div></div><divclass="portfolioContainer"><divclass="webTemplates objects"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/cc99b535336825.Y3JvcCwxMzk1LDEwOTEsMCw3ODA.png"alt="image"></div><divclass="drawings places"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/d4cfa934191261.Y3JvcCw2MTMsNDc5LDQsMjA0.jpg"alt="image"></div><divclass="webTemplates food"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/11893193.5482088f6f391.png"alt="image"></div><divclass="logos drawings"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/be4b9728308865.55b92edb950fc.jpg"alt="image"></div><divclass="webTemplates"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/12963199.548365055868a.png"alt="image"></div><divclass="ui"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/20342607.5434c04b49254.png"alt="image"></div><divclass="drawings"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/b11bbb26474383.555f91fd42584.jpg"alt="image"></div><divclass="webTemplates"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/14385875.548573dae7a09.jpg"alt="image"></div><divclass="drawings"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/14569777.5485b3876a1b9.png"alt="image"></div><divclass="logos"><imgsrc=" https://mir-s3-cdn-cf.behance.net/projects/202/1d854a24500155.5505cccd057a4.jpg"alt="image"></div><divclass="ui"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/f9b95b26406487.555cc1fded76f.jpg"alt="image"></div><divclass="logos"><imgsrc="https://mir-s3-cdn-cf.behance.net/projects/202/181a7b35469661.Y3JvcCw3NjUsNTk5LDY3LDA.png"alt="image"></div></div></div></div>

CSS

body {
  font-family: Arial;
}

a:focus {
  outline: none;
}

.portfolioFilter {
  padding: 15px0;
}

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

.portfolioFiltera.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;
}

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
            }
         });
         returnfalse;
    }); 
});

hope it will help you, good luck!