Coder Wrap provides free to use snippets

/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
 box-sizing: border-box;
}

body {
 font-family: "Poppins", sans-serif;
 color: #444;
 box-sizing: border-box;
 background-color: #f5f5f5;
 margin: 0px;
}

.container {
 max-width: 1480px;
 padding: 0px 15px;
 margin: auto;
}

/**Typeo CSS End**/
img {
 max-width: 100%;
}

.hide {
 animation: hide .2s ease 0s 1 normal forwards;
 transform-origin: center;
}

.show {
 animation: show .2s ease 0s 1 normal forwards;
 transform-origin: center;
}

@keyframes hide {
 0% {
  transform: scale(1);
 }

 100% {
  transform: scale(0);
  width: 0;
  height: 0;
  margin: 0;
 }

}

@keyframes show {
 0% {
  transform: scale(0);
  width: 0;
  height: 0;
  margin: 0;
 }

 100% {
  transform: scale(1);
 }

}

.projects {
 display: flex;
 flex-flow: row wrap;
 align-items: center;
}

.project {
 width: 33.33%;
 text-align: center;
}

.project-inner {
 padding: 15px;
}

.project img {
 display: block;
 height: auto;
 width: 100%;
 transition: 0.5s all;
}

.project-img {
 overflow: hidden;
}

.project-img:hover img {
 transform: scale(1.3);
}

.label-tag {
 background-color: #e63b30;
 width: 100%;
 display: inline-block;
 color: #fff;
 font-size: 20px;
 font-weight: 700;
 padding: 10px;
 text-transform: uppercase;
 margin-top: 1px;
}

.filters {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
}

.filters .filter {
 margin: 20px;
 cursor: pointer;
 position: relative;
 text-transform: uppercase;
 font-weight: 600;
}

.filters .filter:before {
 content: '';
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 0;
 height: 2px;
 background-color: #e63b30;
 display: inline-block;
 transition: 0.5s all;
 -webkit-transition: 0.5s all;
}

.filters .filter:hover, .filters .filter.active {
 color: #e63b30;
}

.filters .filter:hover:before, .filters .filter.active:before {
 width: 100%;
}

@media(max-width:992px) {
 .project {
  width: 50%;
  text-align: center;
 }

 .project-inner {
  padding: 8px 8px;
 }

 .label-tag {
  font-size: 14px;
  padding: 7px;
 }

}

@media(max-width:599px) {
 .project {
  width: 100%;
 }

 .project-inner {
  padding: 10px 0px;
 }

 .filters {
  padding-top: 25px;
 }

 .filters .filter {
  margin: 8px 8px;
  font-size: 10px;
 }

}

const filters = document.querySelectorAll('.filter');
document.querySelector('.filters [data-filter="all"]').classList.add('active');
filters.forEach(filter => {  
 filter.addEventListener('click', function(e) {
 //Active Class Start 
  filters.forEach(e => { 
   e.classList.remove('active')
  })
  filter.classList.add('active');
 //Active Class End
  let selectedFilter = filter.getAttribute('data-filter');
  let itemsToHide = document.querySelectorAll(`.projects .project:not([data-filter='${selectedFilter}'])`);
  let itemsToShow = document.querySelectorAll(`.projects [data-filter='${selectedFilter}']`);
  if (selectedFilter == 'all') {
    itemsToHide = [];
    itemsToShow = document.querySelectorAll('.projects [data-filter]');
  }
  
  itemsToHide.forEach(el => {
    el.classList.add('hide');
    el.classList.remove('show');
  });

  itemsToShow.forEach(el => {
    el.classList.remove('hide');
    el.classList.add('show'); 
  });
 });
});