Responsive Filterable Image Gallery using HTML, CSS & Javascript

Responsive Filterable Image Gallery using HTML, CSS & Javascript

Responsive Filterable Image Gallery using HTML, CSS & Javascript

Responsive Filterable Image Gallery is used on various websites to sort images by category. In this article, I am going to show you how to create a Responsive Filterable Image Gallery with the help of HTML CSS, and javascript. 

Filterable Image Gallery is a popular web element that is used around various websites. It is a kind of image gallery where a large number of images are neatly arranged together. The notable point is that all the images can be sorted by category here. There is a navigation bar where all the categories are sorted. When clicking on any one of those categories. Then all the images in that category are seen and the rest of the images are hidden. As a result, the user can easily find the images of his choice. 

This type of design is mainly used in many websites where a lot of images are put together. However, in this case, I have created this Filterable Image Gallery using Pure JavaScript.

Video Tutorial of Responsive Filterable Image Gallery

If you do not understand what I am saying then you can watch the video tutorial below. This video will help you to know better how I made this design.

Hopefully, you have learned how to make it from the video tutorial above. As you can see above, I first created a navigation bar on a web page. Where I created five-category buttons. Here I have used a total of 9 images. I have used different categories of images here. 

You can add many more images with these 9 images if you want. In the category in the navigation bar, you can see the image related to the category you click on. In the same way, when you click on another category, the images of that category will be seen and the rest will be hidden. I made it fully responsive so that it can be used on all devices.

I hope you understand how this Responsive Filterable Image Gallery works. But for better understanding, I have given the live demo below. This live demo will help you get a live experience of this design.

See the Pen
by Foolish Developer (@fghty)
on CodePen.

How to Create Filterable Image Gallery using HTML and CSS

I have shown the complete step-by-step how to make it for beginners with pictures below. Of course, you can download the required source code using the download button at the bottom of the article.
I did the basic design of the webpage using the CSS code below.

body{
line-height: 1.5;
font-family: sans-serif;
}
*{
margin:0;
box-sizing: border-box;
}
.row{
display: flex;
flex-wrap: wrap;
}
img{
max-width: 100%;
vertical-align: middle;
}

Step 1: Create the basic structure

 I have created the basic structure of this image gallery using my own HTML and CSS code. Here I have used background-color: # 2a2932 and min-height: 100vh.

<section class=”gallery”>
<div class=”container”>
  
</div>
</section>
.gallery{
   width: 100%;
   display: block;
   min-height: 100vh;
   background-color: #2a2932;
   padding: 100px 0;
}
.container{
max-width: 1170px;
margin:auto;
}
Create the basic structure

Step 2: Create a navigation bar for categories

Now I have created a navigation bar using the HTML and CSS code below. As I said before there is a navigation bar where all the categories are sorted. Here I have used 5 topics and nine images. You can increase or decrease the number of categories if you want.

 The text in the category has been given the shape of a button. The text in these buttons is font-size: 17px and the color is white. Border: 2px solid white is used to make texts the size of buttons.

<div class=”row”>
 <div class=”gallery-filter”>
   <span class=”filter-item active” data-filter=”all”>all</span>
   <span class=”filter-item” data-filter=”watch”>Watch</span>
   <span class=”filter-item” data-filter=”headphone”>headphone</span>
   <span class=”filter-item” data-filter=”camera”>camera</span>
   <span class=”filter-item” data-filter=”phone”>Phone</span>
 </div>
</div>
.gallery .gallery-filter{
   padding: 0 15px;
   width: 100%;
   text-align: center;
   margin-bottom: 40px;
}
.gallery .gallery-filter .filter-item{
   color: #ffffff;
   font-size: 17px;
   border: 2px solid white;
   text-transform: uppercase;
   display: inline-block;
   border-radius: 20px;
   margin-right: 8px;
   cursor: pointer;
   padding: 8px 20px 8px 20px;
   line-height: 1.2;
   transition: all 0.3s ease;
}
Create a navigation bar for categories

I designed the active button with a little bit of CSS code below. This means that the category you click on here will change a bit. What will change here is determined by the CSS code below. Basically, the background color and the color of the border will change to blue.

.gallery .gallery-filter .filter-item.active{
  color: white;
  border-color : #16b5ef;
  background: #16b5ef;
}
designed the active button with a little bit of CSS

 Step 3: Add images to Image Gallery

Now I have added all the images using the following HTML code. Here I have added 9 photos. I have given the category of the image that I have used here in the first div (<div> </div>). You see, I used two divs for each image.

<div class=”row”>
 <!–1st gallery item start –>
 <div class=”gallery-item shoe”>
   <div class=”gallery-item-inner”>
      <img src=”shoe-1.jpg” alt=”shoe”>
   </div>
 </div>
 
  
<!–2nd gallery item start –>
 <div class=”gallery-item headphone”>
  <div class=”gallery-item-inner”>
    <img src=”headphone-1.jpg” alt=”headphone”>
  </div>
 </div>
 
<!–3rd gallery item start –>
 <div class=”gallery-item camera”>
  <div class=”gallery-item-inner”>
    <img src=”camera-1.jpg” alt=”camera”>
  </div>
 </div>
 
<!–4th gallery item start –>
 <div class=”gallery-item headphone”>
  <div class=”gallery-item-inner”>
    <img src=”headphone-2.jpg” alt=”headphone”>
  </div>
 </div>
 
<!–5th gallery item start –>
 <div class=”gallery-item camera”>
   <div class=”gallery-item-inner”>
     <img src=”camera-2.jpg” alt=”camera”>
   </div>
 </div>
  
 <!–6th gallery item end –>
 <div class=”gallery-item phone”>
   <div class=”gallery-item-inner”>
     <img src=”phone-1.jpg” alt=”phone”>
   </div>
 </div>
<!–7th gallery item end –>
 <div class=”gallery-item camera”>
   <div class=”gallery-item-inner”>
     <img src=”camera-3.jpg” alt=”camera”>
   </div>
 </div>
  
<!–8th gallery item end –>
 <div class=”gallery-item watch”>
  <div class=”gallery-item-inner”>
    <img src=”watch-1.jpg” alt=”watch”>
  </div>
 </div>
 <!–9th gallery item start –>
 <div class=”gallery-item watch”>
   <div class=”gallery-item-inner”>
     <img src=”watch-2.jpg” alt=”watch”>
   </div>
 </div>
</div>

Step 4: Design the images added above

Now I have beautifully arranged these images using CSS code. Here I have used three images in each column. I have used the code width: calc (100% / 3) to place these three images in each column. Here if you want to put four images in each column then use 4 instead of 3.

.gallery .gallery-item{
width: calc(100% / 3);
padding: 15px;
}
.gallery .gallery-item-inner img{
width: 100%;
  border: 3px solid #d4dad9;
}
Responsive Filterable Image Gallery

I have used animations using @keyframes. When you click on a category, each of those categories will appear side by side with the image. For example, if you click on a category that has four images. There are two images in the first row and two images in the second row. 

When you click on this category, all the images in the rest of the category will be hidden and all four images will appear side by side. The following code has been used to make this relocation a little more animated. 0.5 seconds has been used here which means it will take 0.5 seconds to change that place.

.gallery .gallery-item.show{
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}

when you click on a category, all other images will be hidden. In that case display: none has been used which means those images cannot be seen. Although it works I did it with the help of JavaScript. Now I just put the information and then I implemented it with the help of JavaScript code.

.gallery .gallery-item.hide{
display: none;
}

Step 5: Make the filterable image gallery responsive

Now I have made it responsive using the @media function of CSS code. Here we have added separate information for mobile and tab.

@media(max-width: 491px){
.gallery .gallery-item{
width: 50%;
}
}
@media(max-width: 667px){
    .gallery .gallery-item{
width: 100%;
}
.gallery .gallery-filter .filter-item{
margin-bottom: 10px;
}
}
Make the filterable image gallery responsive

Step 6: Now execute this design with JavaScript 

Above we just designed it now we will implement it with JavaScript code. In other words, if we click on the category in this navigation, we will execute the images of that category so that they can be seen.

 First set a constant of gallery-filter and gallery-item. Because we know that no ID or class function can be used directly in JavaScript.

 const filterContainer = document.querySelector(“.gallery-filter”);
 const galleryItems = document.querySelectorAll(“.gallery-item”);

I have implemented these category buttons using the JavaScript codes below. If you do not understand your JavaScript structure then you can watch the video tutorial above. 

filterContainer.addEventListener(“click”, (event) =>{
   if(event.target.classList.contains(“filter-item”)){
     // deactivate existing active ‘filter-item’
    filterContainer.querySelector(“.active”).classList.remove(“active”);
     // activate new ‘filter-item’
    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”);
       }
    });
   }
 });
Filterable Image Gallery using HTML, CSS

Hopefully from the above tutorial, you have learned how to create this portfolio filter image gallery. You can use it directly on any of your own projects as it is designed to be responsive. You can see many more designs like this I have already made.