Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #223655

    Hi, I love the Masonry Gallery. Very cool! But I need to make a couple modifications to it.

    1. Can we switch the behavior of the “overlay” effect? I’d like the image in the Masonry Gallery to display normal, but become lighter (and still enlarge slightly) on mouseover.

    2. Right now it appears the Masonry grid only allows 3 columns. How can I change this to allow for 5 or 6 columns? Is this doable?


    Hey mgerenser!

    1) You can try to add an opacity effect to the masonry images – insert this code into the quick css field

    .av-masonry-image-container:hover img {
    opacity: 0.6;

    2) See



    For #1, the code you gave me definitely works for the “mouseover”. Awesome! Thank you! But what about making the opacity 100% for the image-container in its normal state?


    Also, thanks for the info on my second question. But is there a way to force the masonry gallery to only show 1 row? Basically, I have a special use case where I want to show just 5-6 columns and only one row.



    1) Afaik it’s set to 100% by default. You can change the default opacity with this css code:

    .av-masonry-image-container img {
    opacity: 1;

    2) No, not really because it depends on the screen size and the number of items. Even if you i.e. limit the number of images to 6 the number of rows may increase if there’s not enough space for 6 columns in the first row.


Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.