We have used mixitup filtering plugin to filter the works
1. Html Markup Set
html markup
//filter menu
<div class="work-filter wow fadeInRight animated" data-wow-duration="500ms">
<ul class="text-center">
<li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
<li><a href="javascript:;" data-filter=".branding" class="filter">Branding</a></li>
<li><a href="javascript:;" data-filter=".web" class="filter">web</a></li>
<li><a href="javascript:;" data-filter=".logo-design" class="filter">logo design</a></li>
<li><a href="javascript:;" data-filter=".photography" class="filter">photography</a></li>
</ul>
</div>
//project filtering
<div class="project-wrapper">
<figure class="mix work-item branding">
<img src="img/works/item-1.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-1.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
<figure class="mix work-item web">
<img src="img/works/item-2.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-2.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
<figure class="mix work-item logo-design">
<img src="img/works/item-3.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-3.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
<figure class="mix work-item photography">
<img src="img/works/item-4.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-4.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
<figure class="mix work-item branding">
<img src="img/works/item-5.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-5.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
<figure class="mix work-item web">
<img src="img/works/item-6.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-6.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
<figure class="mix work-item logo-design">
<img src="img/works/item-7.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-7.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
<figure class="mix work-item photography">
<img src="img/works/item-8.jpg" alt="">
<figcaption class="overlay">
<a class="fancybox" rel="works" title="Write Your Image Caption Here" href="img/works/item-8.jpg"><i class="fa fa-eye fa-lg"></i></a>
<h4>Labore et dolore magnam</h4>
<p>Photography</p>
</figcaption>
</figure>
</div>
Add your menu with data-filter for filtering your contents. Then add mix and the data-filter name your want filter on your content.
2. Mixitup initialization on custom.js file
jQuery code
$(".project-wrapper").mixItUp();
initialize with the id of your contents parent
If you want to know more about mixitup try this following link – https://www.kunkalabs.com/mixitup/