FancyBox install files:
Gallery
FancyBox
HTML
<section class="gallery">
<div class="wrapper">
<div class="gallery_nav">
<a href="#" class="gallery_nav_item || active">All</a>
<a href="#" class="gallery_nav_item">Office Interior</a>
<a href="#" class="gallery_nav_item">Retail Space</a>
<a href="#" class="gallery_nav_item">Café & Restaurants</a>
<a href="#" class="gallery_nav_item">Others</a>
</div>
<div class="gallery_wrap">
<a href="/img/gallery_img_1.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_1.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_2.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_2.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_3.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_3.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_4.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_4.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_5.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_5.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_6.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_6.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_7.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_7.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_8.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_8.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_9.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_9.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_10.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_10.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_11.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_11.jpg" alt="Café & Restaurants">
</a>
<a href="/img/gallery_img_12.jpg" class="gallery_item" data-fancybox="gallery">
<span class="gallery_overlay"></span>
<img src="/img/gallery_img_12.jpg" alt="Café & Restaurants">
</a>
</div>
</div>
</section>CSS
.gallery .gallery_nav{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;padding:1.5rem 0 1.2rem;margin:0 0 3rem;border-top:.1rem solid #bfbfbf;border-bottom:.1rem solid #bfbfbf}
.gallery .gallery_nav a{font-size:1.8rem;line-height:1.2;font-weight:700;color:#bfbfbf;text-transform:uppercase;margin:.5rem 1.5rem}
.gallery .gallery_nav a.active{color:#09a5be}
.gallery .gallery_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 -1.5rem}
.gallery .gallery_wrap .gallery_item{display:block;width:-webkit-calc(100% / 3 - 3.01rem);width:-moz-calc(100% / 3 - 3.01rem);width:calc(100% / 3 - 3.01rem);margin:1.5rem;padding-top:20%;overflow:hidden;position:relative}
.gallery .gallery_item img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;font-family:'object-fit: cover;'}
.gallery .gallery_item .gallery_overlay{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:rgba(9,165,190,0.7) url(/img/arrows.png) no-repeat center/12.2rem;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;opacity:0;z-index:-1}
@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
.gallery .gallery_nav a:hover{color:#09a5be}
.gallery .gallery_item:hover .gallery_overlay{opacity:1;-webkit-transition:.3s;-o-transition:.3s;-moz-transition:.3s;transition:.3s;z-index:2}
}
@media only screen and (max-width: 992px) {
.gallery .gallery_nav{margin:0 0 1.5rem}
.gallery .gallery_nav a{font-size:1.6rem}
}
@media only screen and (max-width: 767px) {
.gallery .gallery_nav a{font-size:1.4rem;margin:.5rem 1rem}
}
@media only screen and (max-width: 550px) {
.gallery .gallery_nav a{font-size:1.3rem}
.gallery .gallery_wrap{margin:0 -1rem}
.gallery .gallery_wrap .gallery_item{width:-webkit-calc(100% / 2 - 2.01rem);width:-moz-calc(100% / 2 - 2.01rem);width:calc(100% / 2 - 2.01rem);padding-top:30%;margin:1rem}
}SCSS
/* Vars */
$main: #09a5be;
.gallery {
.gallery_nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
padding: 1.5rem 0 1.2rem;
margin: 0 0 3rem;
border-top: .1rem solid #bfbfbf;
border-bottom: .1rem solid #bfbfbf;
a {
font-size: 1.8rem;
line-height: 1.2;
font-weight: 700;
color: #bfbfbf;
text-transform: uppercase;
margin: .5rem 1.5rem;
&.active {
color: $main;
}
}
}
.gallery_wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 -1.5rem;
}
.gallery_wrap .gallery_item {
display: block;
width: calc(100% / 3 - 3.01rem);
margin: 1.5rem;
padding-top: 20%;
overflow: hidden;
position: relative;
}
.gallery_item {
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
}
.gallery_overlay {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba($main, .7) url(/img/arrows.png) no-repeat center/12.2rem;
transition: .3s;
opacity: 0;
z-index: -1;
}
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.gallery .gallery_nav a:hover {color: $main}
.gallery .gallery_item:hover .gallery_overlay {opacity: 1;transition: .3s;z-index: 2}
}
@media only screen and (max-width: 992px) {
.gallery .gallery_nav {margin: 0 0 1.5rem}
.gallery .gallery_nav a {font-size: 1.6rem}
}
@media only screen and (max-width: 767px) {
.gallery .gallery_nav a {font-size: 1.4rem;margin: .5rem 1rem}
}
@media only screen and (max-width: 550px) {
.gallery .gallery_nav a {font-size: 1.3rem}
.gallery .gallery_wrap {margin: 0 -1rem}
.gallery .gallery_wrap .gallery_item {width: calc(100% / 2 - 2.01rem);padding-top: 30%;margin: 1rem}
}