Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 24, 2018 at 2:29 pm #902145
    jonna_gaertner

    Hi,

    I’m setting up a website with Enfold Child. Many sites contain a masonry with portfolio entries, and I would like to further customise the appearance of the masonries.

    Is it possible to inverse the hover effect of a masonry and at the same time add different overlay colours?

    To be precise: I would like the masonry to look like the grid row (screenshots attached): various, pre-defined overlay colours, which change to the actual portfolio entry image when hovering over.

    Moreover, is it possible to define different masonries of that kind? For example, on page 1 I would like the masonry to appear in different shades of red, whereas on page 2 it should appear in different shades of blue.

    Thank you very much for your support.

    January 25, 2018 at 7:27 am #902667
    Victoria

    Hey jonna_gaertner,

    Yes, that is possible but with extensive css customization.
    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    January 25, 2018 at 10:32 am #902727
    jonna_gaertner
    This reply has been marked as private.
    January 29, 2018 at 11:52 am #904190
    Ismael

    Hi,

    Thank you for the info.

    You can use the nth child selector to apply different colors for the masonry items. Example.

    #top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(1) .av-inner-masonry-content {
    background: rgba(6,52,0,0.35);
}

#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(2) .av-inner-masonry-content {
    background: rgba(100,200,0,0.35);
}

#top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(3) .av-inner-masonry-content {
    background: rgba(60,52,255,0.35);
}

    The css code above will apply 3 different colors for the first 3 masonry items.

    Best regards,
    Ismael

    January 29, 2018 at 12:35 pm #904234
    jonna_gaertner

    Hi Ismael,
    thanks a lot for your support! It works well :)

    I’ve got one more question: Can I define different overlay colours for masonries on different pages? For example: With the code you provided I have defined masonry overlay colours which I want to use on page 1. Works fine. On page 2, I would like to use a masonry as well – but with other colours. How can I do that?

    Thank you for your help and kind regards!

    January 30, 2018 at 5:00 am #904615
    Ismael

    Hi,

    Yes, that’s possible. Replace the “#top” selector with the page id selector. Example.

    .page-id-1234 .av-caption-style-overlay .av-masonry-item-with-image:nth-child(1) .av-inner-masonry-content {
    background: rgba(100,200,0,0.35);
}

.page-id-4321.av-caption-style-overlay .av-masonry-item-with-image:nth-child(1) .av-inner-masonry-content {
    background: rgba(6,255,0,0.35);
}

    The css code above will change the overlay color of the first masonry items inside the page with the id 1234 and 4321.

    Best regards,
    Ismael

    March 7, 2018 at 10:26 am #922822
    seykom

    Hi,

    I also used your code above (the first one). But what do I have to do when there are more than 3 items?

    This additional line hasn´t worked…

    #top .av-caption-style-overlay .av-masonry-item-with-image:nth-child(4) .av-inner-masonry-content {
    background: rgba(60,52,255,0.35);
    }

    Thansk!

    March 7, 2018 at 10:36 am #922829
    seykom

    Got it! :)

    March 7, 2018 at 1:04 pm #922950
    Victoria

    Hi seykom,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 5, 2019 at 5:00 pm #1087513
    jonrouse

    new thread started…

    • This reply was modified 5 years, 8 months ago by jonrouse.
    April 6, 2019 at 3:09 am #1087645
    Jordan Shannon

    Hi,

    We will check that new thread.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Different overlay colours for the hover effect of a masonry?’ is closed to new replies.