In this blog we will show you how to create a portfolio gallery with filters and Fully Responsive.

Table of Contents

How to Create Portfolio Gallery with Filter?

To create a Portfolio Gallery with Filters we will use JavaScript to design with the help of HTML and CSS which is shown step by step below. Mostly portfolio gallery all used to show portfolio in their own website.

Step1:- Create index.html File.

<!DOCTYPE html>
<html>
<head>
    <!-------coded by Myprograming.com---------->
  <meta charset="utf-8">
  <title>gallert filter portfolio</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<section id="gallery">
      <div class="galleryfilter">
        <h1>Portfolio Gallery Filter</h1>
        <ul class="filter-menu">
            <li data-target="all">All</li>
            <li data-target="men">MEN</li>
            <li data-target="kid">KID</li>
            <li data-target="female">FEMALE</li>
        </ul>

        <ul class="filter-item">
            <li data-item="men">
              <img src="http://www.myprograming.com/wp-content/uploads/2021/10/mr-khushal.jpg">
            </li>
            <li data-item="men">
              <img src="http://www.myprograming.com/wp-content/uploads/2021/10/khushal.jpg">
            </li>
            <li data-item="kid">
              <img src="http://www.myprograming.com/wp-content/uploads/2021/10/cute-baby-boy.jpg">
            </li>
          <li data-item="kid">
            <img src="http://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-baby-boy.jpg">
          </li>
            <li data-item="female">
              <img src="http://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-girl.jpg">
            </li>
            <li data-item="female">
              <img src="http://www.myprograming.com/wp-content/uploads/2021/10/cute-girl.jpg">
            </li>
        </ul>
      </div>
</section>
  

<script src="demo.js"></script>
</script>
</body>
</html>

Step2:- Create style.css File.


html,body{
    width: 100%;
    height: 100%;
}

body{
    font-family: sans-serif;
    font-size: 18px;
    overflow-x: hidden;
}

#gallery ul{
    list-style: none;
}

#gallery img{
    max-width: 100%;
    height: auto;
}

#gallery{
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.galleryfilter ul{
    list-style: none;
}

.galleryfilter img{
    max-width: 100%;
    height: auto;
}

  
.filter-menu{
    margin-bottom: 20px;
}
.filter-menu li{
    display: inline-block;
    padding: 10px 18px;
    background:green;
    color: #fff;
    cursor: pointer;
}
.filter-menu li:hover,
.filter-menu li.current{
    background:yellow;
    color: #000;
    font-weight: bold;
}

.filter-item li{
    width: 50%;
    padding: 2px;
    float: left;
}

.filter-item li.active{
    width: 50%;
    padding: 2px;
    transition: all 0.5s ease;
}

.filter-item li.delete{
    width: 0%;
    padding: 0;
    transition: all 0.5s ease;
}

.filter-item img{
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px){
    .filter-item li.active,
    .filter-item li{
        width: 33.33%;
    }
 
}
@media screen and (min-width: 1280px){
    .filter-item li.active,
    .filter-item li{
        width: 25%;
    }
 
}

Step3:- Create demo.js File.


let sortBtn = document.querySelector('.filter-menu').children;
let sortItem = document.querySelector('.filter-item').children;

for(let i = 0; i < sortBtn.length; i++){
    sortBtn[i].addEventListener('click', function(){
        for(let j = 0; j< sortBtn.length; j++){
            sortBtn[j].classList.remove('current');
        }

        this.classList.add('current');
        

        let targetData = this.getAttribute('data-target');

        for(let k = 0; k < sortItem.length; k++){
            sortItem[k].classList.remove('active');
            sortItem[k].classList.add('delete');

            if(sortItem[k].getAttribute('data-item') == targetData || targetData == "all"){
                sortItem[k].classList.remove('delete');
                sortItem[k].classList.add('active');
            }
        }
    });
}