Well, I hope I will be able to explain correct
Biggest "pain in ass" is creating classes of pics for filtering. It has to be NOT NESTED classes. Because nested classes do not appear in the interactions. So I created few images with all classes that I need. (It is not necessary to upload pics on this step). For example:
1- img-gallery ( later will be used for all images),
2 - plum,
3 - cherry,
4 - apple,
5 - rose,
6 - tulips,
8 - flowers
Then we are adding to our gallery, images, which there has to be and which we will filtering. All images inside the div's and has display settings "Inline-Block". ALL images will have to class "img-gallery", then depends on picture's type we are adding more classes to every of them. In this case will have images:
- "img-gallery", "plum", "fruits"
- "img-gallery", "cherry", "fruits"
- "img-gallery", "apple", "fruits"
- "img-gallery", "rose", "flowers"
- "img-gallery, "tulips", "flowers"
Next step is creating buttons (links) for filtering gallery. So in this case we will have:
1) All images
For every button (link) we have to create interaction on CLICK trigger, affecting different elements.
Show All imgs:
Will be 2 steps:
1 step: Scale to minimum (there is 0,01x) and
make it transparant:
2 step: Scale to original and make it visible:
For filtering other classes we will have to make 2 triggers on click, few steps every trigger.
Examle for plum:
1st trigger is hiding all img-gallery
1st trigger, 1step: img-gallery ---> scale 0.01x, opacity 0%
1st trigger, 2step: img-gallery ---> display none
2nd trigger is showing only class that we need
2nd trigger 1step: plum ---> scale 0.01x, opacity 0%
2nd trigger 2step: plum ---> scale to original, opacity 100% ##!!!!!! UPD : in 2nd step add Diplay Inline-block. Other way image will not appear if it was hide by other filter interaction ##
Same interactions we make for every other class-filter (button or link)
It can look complicated, but it is really not. It is pretty much similar steps. And no code, no connected plugins. For me it is much easier.
HERE IS DEMO ---> http://filtergallery.webflow.com/