CODEWITHSUNDEEP
javascriptcssjquery-masonrymasonry
Paulius Vitkus
Paulius Vitkus

Reputation: 129

Masonry item lower opacity instead of hiding

I know that default Masonry behaviour is to hide item, when item is in active (other category is chosen), but in my code it lowers opacity to 0.25 instead of hiding and all other items regrouping: http://veritaswp.excellence.lt/en/photo-gallery/

There is my CSS code:

.project.inactive {
  opacity: .25 !important;
  pointer-events: none !important;
}

I have tried instead of opacity parameter write display: none, but masonry item still take space (because masonry items are with position: absolute, I guess).

How can I solve this problem? How to hide masonry item with all items regrouping, instead of lowering it's opacity?

Upvotes: 0

Views: 135

Answers (1)

xort
xort

Reputation: 347

You can use display: none on the items you want to hide first and then call masonry again on your container like so:

$(".masonry").masonry();

Or

$(".masonry").masonry("layout");

That is if you're using jQuery. If you're using plain JavaScript, just do the same thing.

That way with display:none your unwanted items will be removed from the flow and calling layout will re-order your remaining items accordingly.

EDIT Codepen example

Upvotes: 1

Related Questions