I created a photo filter, but I couldn’t get a soft removal effect.
I have done the desired effect in method 1 (line 13), but the problem is that there are voids in the places of the hidden elements, and if i write : display: none; the effect will be gone.
Here is the link to see what i did:
Here is the link to see what I’m trying to get at here :
https://ivkovic.me/themes/pluton/#portfolio
Hello @albaraa_1949
you can use display : none;
to remove the box you want so for example i added this to your css
div.remove{
display: none;
}
and updated your product loop to this
products.forEach((el) => {
if (!el.classList.contains(spn.textContent.toLowerCase())) {
el.classList.add("hidden");
setTimeout(() => {el.classList.add("remove")},500);
} else {
el.classList.remove("hidden");
el.classList.remove("remove");
}
});
i used the settimeout to allow the animation to finish it job
hope that help and have a nice day 
2 Likes
by the way when you see some site and not sure how it been implemented you can inspect it so click on any item then inspect then and notice the html and css for the element you like also you can check the js code just go to the debugger panel from your browser
and have a nice day 
1 Like