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