<div class="container-fluid">
  <article class="body-work">
    <div class="row justify-content-sm-center">
      <div class="col col-sm-12 col-xl-8 p-0 mt-4 align-items-sm-center justify-content-sm-center d-md-flex flex-column flex-md-row">
        <h5 class="col col-md-2">Filter by:</h5>
        <div class="col col-md-8 filter-container d-inline-flex justify-content-md-between">
          <button type="button" class="filter filter--all" data-filter="*">All</button>
          <button type="button" class="filter filter--web" data-filter=".web">Web</button>
          <button type="button" class="filter filter--graphic" data-filter=".graphic">Graphics</button>
          <button type="button" class="filter filter--photo" data-filter=".photo">Photo</button>
        </div>
      </div>
      <div class="col col-12 p-0 flex-wrap work-tab-container">
        <a href="#" class="mix work-tab web">
          <span class="overlay"></span>
          <h6>
            <span>Tab 1</span>
          </h6>
        </a>
        <a href="#" class="mix work-tab web">
          <span class="overlay"></span>
          <h6>
            <span>Tab 2</span>
          </h6>
        </a>
        <a href="#" class="mix work-tab web">
          <span class="overlay"></span>
          <h6>
            <span>Tab 3</span>
          </h6>
        </a>
        <a href="#" class="mix work-tab graphic">
          <span class="overlay"></span>
          <h6>
            <span>Tab 4</span>
          </h6>
        </a>
        <a href="#" class="mix work-tab photo">
          <span class="overlay"></span>
          <h6>
            <span>Tab 5</span>
          </h6>
        </a>
        <a href="#" class="mix work-tab web">
          <span class="overlay"></span>
          <h6>
            <span>Tab 6</span>
          </h6>
        </a>
        <a href="#" class="mix work-tab graphic">
          <span class="overlay"></span>
          <h6>
            <span>Tab 7</span>
          </h6>
        </a>
        <a href="#" class="mix work-tab photo">
          <span class="overlay"></span>
          <h6>
            <span>Tab 8</span>
          </h6>
        </a>
      </div>
    </div>
  </article>
</div>
.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    position: relative;
    background: black;
    border-radius: 2px;
    margin-bottom: 1rem;
    min-width:100px;
}

.mix:before {
    content: '';
    display: inline-block;
    padding-top: 56.25%;
}

.filter-container{
    margin:0;
}

.filter{
    width:24%;
    margin:0 1%;
    padding:0.75rem 0;
    border:0;
    outline:0;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, #929d9d 50%, #c5c5c5 50%);
    transition: background-position 0.15s;
    background-position:0 -5px;
    font-size:1.1rem;
    color:#ffffff;
    text-align:center;
}

.filter:hover,
.filter[class*='active']{
    cursor:pointer;
    background-position:0 100%;
}

.filter:focus{
    outline:0;
}

.filter--web{
    background-image: linear-gradient(to bottom, #929d9d 50%, #35c6ca 50%);
}

.filter--graphic{
    background-image: linear-gradient(to bottom, #929d9d 50%, #d0a27d 50%);
}

.filter--photo{
    background-image: linear-gradient(to bottom, #929d9d 50%, #d0cb7d 50%);
}

.work-tab-container{
    display:flex;
    align-items: center;
    margin-top:2rem;
}

.work-tab{
    display: block;
    align-items: center;
    justify-content: center;
    width: 19.5%;
    margin: 0.25% 0.25%;
    background: #929d9d;
    border:0;
    overflow: hidden;
}

.work-tab h6{
    z-index: 1;
    padding: 20% 0;
    margin:0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:0rem;
    transform: scale(1);
    transition: all 0.3s;
}

.work-tab h6 span{
    opacity:0;
    padding:1rem;
    background-color:rgba(95,107,107,0.8);
    color:#ffffff;
    text-align:center;
    transition: background-color 0.5s, opacity 0.3s;
}

.work-tab:hover{
    cursor: pointer;
    border:0;
    padding:0;
}

.work-tab:hover h6{
    font-size:1.2rem;
}

.work-tab:hover h6 span{
    opacity:1;
    background-color:rgba(95,107,107,1);
}

.work-tab .overlay{
    z-index:2;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition: background-position linear 1s;
}

.work-tab.web .overlay{
    background-image: linear-gradient(140deg, #35c6ca 0%,#35c6ca 10%, transparent 10%);
}

.work-tab.graphic .overlay{
    background-image: linear-gradient(140deg, #d0a27d 0%,#d0a27d 10%, transparent 10%);
}

.work-tab.photo .overlay{
    background-image: linear-gradient(140deg, #d0cb7d 0%,#d0cb7d 10%, transparent  10%);
}
// init Isotope
var $grid = $('.work-tab-container').isotope({
  // options
  itemSelector: '.work-tab',
  layoutMode: 'fitRows'
});

$('.filter-container').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://unpkg.com/isotope-layout@2/dist/isotope.pkgd.min.js