Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #796065

    Hi, i am trying to add opacity to the images on Masonry Gallery. I found some solutions you gave, but only a part of it worked.

    What i want is to make the Masonry Gallery images have opacity, and a title (centered on the whole image, not at the bottom). When mouse over or hovered, the opacity to fully disappear as well as the title.

    The title issue i did worked it out. Also the opacity. However, the hover part is giving me trouble.

    I tried this code which is the one that worked

    .avia_desktop.avia_transform3d .av-masonry-image-container { 
    filter: opacity(50%) !important;
    -webkit-filter: opacity(50%) !important;
    -moz-filter: opacity(50%) !important;
    -o-filter: opacity(50%) !important;
    filter: opacity(50%) !important;
    }
    .avia_desktop.avia_transform3d .av-masonry-image-container:hover {
    filter: opacity(100%) !important;
    -webkit-filter: opacity(100%) !important;
    -moz-filter: opacity(100%) !important;
    -o-filter: opacity(100%) !important;
    filter: opacity(100%) !important;
    }

    This other code didnt work at all.

    .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;
    }

    Thank you¡
    Link to website: http://www.cm-arq.com

    • This topic was modified 7 years, 5 months ago by cm-arq.
    #796073

    Hey CM Architects,

    So you basically want the image to brighten when you hover over it?

    Best regards,
    Jordan Shannon

    #796076

    Yes. thats exactly what i want.

    #796701

    Hi,

    Are you referring to the inicio page? I have changed this code in Quick CSS:

    
    .avia_desktop.avia_transform3d .av-masonry-image-container:hover {
    filter: opacity(100%) !important;
    -webkit-filter: opacity(100%) !important;
    -moz-filter: opacity(100%) !important;
    -o-filter: opacity(100%) !important;
    filter: opacity(100%) !important;
    }

    and replaced it with:

    
    .avia_desktop.avia_transform3d .isotope-item:hover .av-masonry-image-container,
    .avia_desktop.avia_transform3d .av-masonry-image-container:hover {
    filter: opacity(100%) !important;
    -webkit-filter: opacity(100%) !important;
    -moz-filter: opacity(100%) !important;
    -o-filter: opacity(100%) !important;
    filter: opacity(100%) !important;
    }

    Let us know if this helps :)

    Best regards,
    Nikko

    #796832

    Wow! im constantly getting amazed by your excellent and quick response!

    That was exactly what i need

    Really, thank you very much. You make Enfold so much valuable.

    #796845

    Hi,

    You’re very much welcome. Glad that we could help! Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Masonry Gallery Images Opacity’ is closed to new replies.