Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and a bit of JavaScript. This project is a Filterable Image Gallery.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them as you want for free.
Recently I created a 3D flip profile card UI design using HTML and CSS. I also share this source code in the blog post here you can check this 3D flip profile card UI design.
Filterable Image Gallery
A filterable image gallery is a specialized type of image display that empowers users to effortlessly filter or organize the showcased images according to specific categories or tags.
In today’s digital landscape, it has become a fundamental component of websites as it streamlines the process of finding desired images, sparing users the need to scroll through an extensive list.
By employing HTML, Bootstrap, and JavaScript, you can significantly augment your web development expertise and fashion a captivating filterable image gallery.
Leveraging the power of Bootstrap, a widely acclaimed front-end framework, enables you to seamlessly craft responsive website elements that seamlessly adapt to diverse screen sizes and devices.
About This Project
The Coding Pakistan blog website embarked on this project with a noble aim: to provide cost-free assistance to students who are delving into the realm of programming languages and learning the ropes of web development technologies.
This initiative encompasses a wide range of valuable resources, covering essential languages such as HTML, CSS, JavaScript, and advanced frameworks like React.js and Next.js.
| Created by | Coding Pakistan |
| Languages | HTML / CSS & JavaScript |
| Source Code | Download GitHub |
| Preview | Take Preview |
How To Create a Filterable Image Gallery Using HTML, CSS & JavaScript
There are some steps to create this type of card hover effect using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- Also, link the JavaScript file with the HTML file using this line of code <script src=”script.js”></script>
- The last step is copying and pasting the given code into your files.
Source Code of Filterable Image Gallery
HTML FILE
<!DOCTYPE html>
<!-- Created By - www.codingpakistan.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Filterable Image Gallery Bootstrap | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<!-- Images Filter Buttons Section -->
<div class="row mt-5" id="filter-buttons">
<div class="col-12">
<button class="btn mb-2 me-1 active" data-filter="all">Show all</button>
<button class="btn mb-2 mx-1" data-filter="nature">Nature</button>
<button class="btn mb-2 mx-1" data-filter="cars">Cars</button>
<button class="btn mb-2 mx-1" data-filter="people">People</button>
</div>
</div>
<!-- Filterable Images / Cards Section -->
<div class="row px-2 mt-4 gap-3" id="filterable-cards">
<div class="card p-0" data-name="nature">
<img src="nature-1.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Mountains</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="nature">
<img src="nature-2.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Lights</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="nature">
<img src="nature-3.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Nature</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="cars">
<img src="Cars-1.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Retro</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="cars">
<img src="Cars-2.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Fast</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="cars">
<img src="Cars-3.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Classic</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="people">
<img src="people-1.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Men</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
<div class="card p-0" data-name="people">
<img src="people-2.jpg" alt="img">
<div class="card-body">
<h6 class="card-title">Girl</h6>
<p class="card-text">Lorem ipsum dolor..</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS FILE
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
font-family: "Poppins", sans-serif;
}
body {
background: #f1f1f1 !important;
}
body .container {
max-width: 1100px;
}
#filter-buttons button {
border-radius: 3px;
background: #fff;
border-color: transparent;
}
#filter-buttons button:hover {
background: #ddd;
}
#filter-buttons button.active {
color: #fff;
background: #6c757d;
}
#filterable-cards .card {
width: 15rem;
border: 2px solid transparent;
}
#filterable-cards .card.hide {
display: none;
}
@media (max-width: 600px) {
#filterable-cards {
justify-content: center;
}
#filterable-cards .card {
width: calc(100% / 2 - 10px);
}
}
JavaScript FILE
// Select relevant HTML elements
const filterButtons = document.querySelectorAll("#filter-buttons button");
const filterableCards = document.querySelectorAll("#filterable-cards .card");
// Function to filter cards based on filter buttons
const filterCards = (e) => {
document.querySelector("#filter-buttons .active").classList.remove("active");
e.target.classList.add("active");
filterableCards.forEach(card => {
// show the card if it matches the clicked filter or show all cards if "all" filter is clicked
if(card.dataset.name === e.target.dataset.filter || e.target.dataset.filter === "all") {
return card.classList.replace("hide", "show");
}
card.classList.add("hide");
});
}
filterButtons.forEach(button => button.addEventListener("click", filterCards));
Video Tutorial – Filterable Image Gallery Using HTML, CSS, and JavaScript
If you don’t understand this code and you want to learn in deep so please watch this video and subscribe to this youtube channel for more videos like this.
Related Content
- Modal PopUp Box Using HTML / CSS & JavaScript
- Weather App using JavaScript with Source Code
- Movie App Using HTML and JavaScript
Conclusion
The implementation of a filterable image gallery using HTML, CSS, and JavaScript presents a powerful solution for enhancing user experience and streamlining the process of browsing through images on a website.
By allowing users to filter and sort images based on specific categories or tags, this feature saves valuable time and effort, enabling users to quickly locate their desired images without the need to scroll through an extensive list.
With the provided source code and the use of these foundational web development technologies, developers can expand their skill set and create visually appealing and responsive image galleries that adapt seamlessly to various screen sizes and devices.
Incorporating a filterable image gallery into your projects not only enhances functionality but also contributes to an enhanced user interface and overall user satisfaction.
