Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 28, 2016 at 5:39 am #590343
    tonyska

    Hello,

    I love the full width masonry gallery. However, I would like to tweak two aspects, and I was wondering if either (or both) was possible:

    1. As the default, the preview images are “faded” until the mouse hovers, at which point they become fully saturated. Is there a way to reverse this, so that they appear in full saturation until hover, at which point they fade a bit?

    2. How can I re-position the caption overlay and control the opacity of its white background? I would like to play around with its position and appearance over the preview image upon hover.

    Thanks!

    March 1, 2016 at 1:58 pm #591522
    Yigit

    Hey tonyska!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
}
.avia_desktop .av-hover-overlay-active .av-masonry-image-container:hover {
    opacity: 0.7!important;
}
figcaption.av-inner-masonry-content {
    background: orange!important;
}

    Regards,
    Yigit

    March 1, 2016 at 6:02 pm #591726
    tonyska

    Thank you! And if I want to move the overlay caption, say, centered on the picture, can I do that using the figcaption selector?

    March 1, 2016 at 6:11 pm #591731
    Yigit

    Hey!

    You can add following code to Quick CSS and adjust as needed

    .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
    bottom: 40%;
}

    Cheers!
    Yigit

    March 1, 2016 at 6:11 pm #591732
    tonyska

    Beautiful. Thank you!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Opacity and overlay position on Masonry Gallery’ is closed to new replies.