< How To Create a Image Gallery with Filtering - Code With Bishal


HTML, CSS and JavaScript resonsive Image Gallery with Filtering


Posted on December 1, 2021 at 4:00 PM [IST], created by Admin, Website: codewithbishal.com


Preview :

  • ALL
  • Violet
  • Green
  • SUNFLOWER

Image Gallery with Filtering :

What the is Image Gallery with Filtering?

=> Our awesome, Image Gallery with Filtering gives visitors an easy way to filter images based on the options.

How can I use this Image Gallery with Filtering?

=> You can easily copy the code from our website and can simply paste it anywhere.

Do I need to know how to code?

=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your contact form. Also, you can try it on our website using the "TRY IT NOW" option.

Is it safe to use Image Gallery with Filtering?

=> Yes, it's completely safe to use Image Filtering.

What are the advantages of Image Filtering?

=> Image Filtering is a very good way for getting comments, feedback, service request, and to increase interaction with your visitor.

Topics covered :

=> how to create a portfolio gallery with filtering background ?, how to create a portfolio gallery with a filtering box ?, how to create a portfolio gallery with filtering code ?, How To Add Filter Effects to Images.

Overview of the Blog :

=> In this blog, you can learn, how to make an Image Filter using HTML, CSS, and JavaScript By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. Image Filtering is a lightweight and easy-to-use HTML, CSS, and JavaScript code that creates an Image Filter for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our Image Filtering using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section].


You might like this :

Create automatic Image Slideshow in HTML CounDown Timer using JavaScript Password Strength meter using JS
Pure HTML - Trip Budget Calculator (HTML and JS) Social media icons with hover effect(Pure CSS)






Step 1) Add your HTML Code -

HTML Code
              
<!DOCTYPE html>
<html>
<head>
<title>Filter Images using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
<div class="pic-cwb">
<ul>
<li data-f="all">ALL</li>
<li data-f="Violet" class="text-Violet">Violet</li>
<li data-f="Green" class="text-Green">Green</li>
<li data-f="sunflower" class="text-sunflower">SUNFLOWER</li>
</ul>
</div>
<div class="block-cover">
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
<div class="col-auto box sunflower"></div>
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
<div class="col-auto box sunflower"></div>
<div class="col-auto box Violet"></div>
<div class="col-auto box Green"></div>
</div>
</body>
</html>

Step 2) Add your CSS Code -

CSS Code
              
<style>
.pic-cwb ul li {
display: inline-block;
padding: 10px 40px 10px 0;
cursor: pointer;
}
.box {
border-radius: 4px;
box-shadow: 6px 7px 28px 0 rgba(16, 16, 16, 0.7);
min-height: 140px;
min-width: calc(22% - 28px);
padding: 0 10px;
margin: 15px;
border-width: 3px;
float: left;
}
.box.Violet {
border: 3px solid #8e44ad;
}
.box.Green {
border: 3px solid #2ecc71;
}
.box.sunflower {
border: 3px solid #f1c40f;
}
.text-Violet {
color: #8e44ad;
}
.text-Green {
color: #2ecc71;
}
.text-sunflower {
color: #f1c40f;
}
.hide {
opacity: 1;
animation-name: a1;
animation-duration: 2s;
animation-fill-mode: forwards;
} @keyframes a1 {
to {
opacity: 0;
}
}
@media (max-width: 767px) {
.pic-cwb ul li {
padding: 0;
}
}
</style>

Step 3) Add your JavaScript Code -

JavaScript Code
                
<script>
const filterBox = document.querySelectorAll(".box");
document.querySelector(".pic-cwb").addEventListener("click",
(event) => { if (event.target.tagName !== "LI") return
false; let filterClass = event.target.dataset["f"];
filterBox.forEach((elem) => { elem.classList.remove("hide");
if (!elem.classList.contains(filterClass) && filterClass !==
"all") { elem.classList.add("hide"); } }); });
</script>

Leave a Comment:

Comments:



Search