Today In this blogspost, you will learn how to create responsive filterable image gallery using HTML CSS. Filterable image gallery is a type of image gallery that allow that users to filter or sort the display image based on certain categories.
An image gallery that allows viewers to filter or sort the displayed images based on certain categories or tags is known as a filterable image gallery. As it enables users to quickly discover the photographs they are interested in without having to scroll through a big list of images, this is one of the fundamental components of today's website.
Your web development abilities can be considerably improved by making a filterable image gallery using HTML CSS. Website components that respond to various screen sizes and devices can be made quickly. This blog post's main goal is to give you a thorough tutorial on how to make a filterable image gallery utilising the three crucial web development languages of HTML CSS.
Responsive Filterable image gallery in HTML CSS [Source code]
To create a responsive, filterable image gallery in HTML CSS, Create a folder with index.html and style.css files, and download the images folder from Google Drive and place it in the project folder.
To start, add following HTML code to your index.html file to create basic layout of image gallery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Filterable image gallery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="gallery">
<div class="container">
<div class="row">
<div class="gallery-filter">
<span class="filter-item active" data-filter="all">all</span>
<span class="filter-item" data-filter="travel">travel</span>
<span class="filter-item" data-filter="photograph">photograph</span>
<span class="filter-item" data-filter="watch">watch</span>
<span class="filter-item" data-filter="laptop">laptop</span>
</div>
</div>
<div class="row">
<div class="gallery-item travel">
<div class="gallery-item-inner">
<img src="img/travel-1.jpg" alt="travel">
</div>
</div>
<div class="gallery-item laptop">
<div class="gallery-item-inner">
<img src="img/laptop-1.jpg" alt="laptop">
</div>
</div>
<div class="gallery-item photograph">
<div class="gallery-item-inner">
<img src="img/photograph-1.jpg" alt="photograph">
</div>
</div>
<div class="gallery-item watch">
<div class="gallery-item-inner">
<img src="img/watch-1.jpg" alt="watch">
</div>
</div>
<div class="gallery-item laptop">
<div class="gallery-item-inner">
<img src="img/laptop-2.jpg" alt="laptop">
</div>
</div>
<div class="gallery-item travel">
<div class="gallery-item-inner">
<img src="img/travel-2.jpg" alt="travel">
</div>
</div>
<div class="gallery-item photograph">
<div class="gallery-item-inner">
<img src="img/photograph-2.jpg" alt="photograph">
</div>
</div>
<div class="gallery-item laptop">
<div class="gallery-item-inner">
<img src="img/laptop-3.jpg" alt="laptop">
</div>
</div>
<div class="gallery-item watch">
<div class="gallery-item-inner">
<img src="img/watch-2.jpg" alt="watch">
</div>
</div>
<div class="gallery-item travel">
<div class="gallery-item-inner">
<img src="img/travel-3.jpg" alt="travel">
</div>
</div>
</div>
</div>
</section>
<script>
const filterContainer = document.querySelector(".gallery-filter"),
galleryItems = document.querySelectorAll(".gallery-item");
filterContainer.addEventListener("click", (event) =>{
if(event.target.classList.contains("filter-item")){
filterContainer.querySelector(".active").classList.remove("active");
event.target.classList.add("active");
const filterValue = event.target.getAttribute("data-filter");
galleryItems.forEach((item) =>{
if(item.classList.contains(filterValue) || filterValue === 'all'){
item.classList.remove("hide");
item.classList.add("show");
}
else{
item.classList.remove("show");
item.classList.add("hide");
}
});
}
});
</script>
</body>
</html>
Next add the following css code to your style.css file to style the image gallery.
*{
margin:0;
box-sizing: border-box;
font-family: sans-serif;
}
.container{
max-width: 1170px;
margin:auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
img{
max-width: 100%;
vertical-align: middle;
}
/*.gallery*/
.gallery{
width: 100%;
display: block;
min-height: 100vh;
background-color: #3f3e45;
padding: 100px 0;
}
.gallery .gallery-filter{
padding: 0 15px;
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.gallery .gallery-filter .filter-item{
color: #ffffff;
font-size: 18px;
text-transform: uppercase;
display: inline-block;
margin:0 10px;
cursor: pointer;
border-bottom: 2px solid transparent;
line-height: 1.2;
transition: all 0.3s ease;
}
.gallery .gallery-filter .filter-item.active{
color: #ff9800;
border-color : #ff9800;
}
.gallery .gallery-item{
width: calc(100% / 3);
padding: 15px;
}
.gallery .gallery-item-inner img{
width: 100%;
}
.gallery .gallery-item.show{
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.gallery .gallery-item.hide{
display: none;
}
/*responsive*/
@media(max-width: 991px){
.gallery .gallery-item{
width: 50%;
}
}
@media(max-width: 767px){
.gallery .gallery-item{
width: 100%;
}
.gallery .gallery-filter .filter-item{
margin-bottom: 10px;
}
}