Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Responsive Portfolio Filter Gallery using HTML CSS & Javascript | Filterable Image Gallery

Enroll My Course : Next Level CSS Animation and Hover Effects

Another Course : Build Complete Real World Responsive Websites from Scratch
Join Our Channel Membership And Get Source Code of My New Video’s Everyday!
Join :

Source Code :
Facebook Page :
Instagram :
Twitter :
Website :

Buy Me A Coffee :

#cssEffect #html #css
give proper credit if you repost this on other social media platform
jQuery Version : How To Create a Portfolio Filter Gallery using HTML CSS & jQuery | Filterable Image Gallery
image source :
Image Download Link :
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

Support site by sharing this post

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Share on reddit
Share on tumblr
Share on stumbleupon
  1. great one mate, but I have changed the js a bit for a more clean code : let list = document.querySelectorAll('.list');

    let itemBox = document.querySelectorAll('.itemBox');

    list.forEach((n, i) =>

    n.addEventListener('click', () => {

    list.forEach((n) => n.classList.remove('active'));


    let datafilter = n.getAttribute('data-filter');

    itemBox.forEach((item) => {


    if (

    item.getAttribute('data-item') === datafilter ||

    datafilter === 'all'

    ) {







  2. Hello brother,
    I wanted to know how are getting those live previews without refreshing again. It would be nice if you share with us.
    Thank you, your work is amazing.

Leave a Reply

Your email address will not be published. Required fields are marked *