Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 4, 2020 at 3:29 am #1219275
    Kelly Erickson

    Hi there!
    I have a Masonry Grid set up on a page to display my Portfolio Entries along with the Title & Exerpt. Couple of quick questions:

    1) I’d like to remove the little arrow/triangle that appears over the Featured image of the portfolio entry. I have seen how to do that on the Portfolio Grid element, just can’t seem to narrow it down for this particular application using the Masonry element.

    2) Right now there’s a white opacity/overlay applied on the Featured image thumbnails of the Masonry grid until you mouse over. How can I change the color of that overlay to something darker and the level of opacity of that’s applied?

    Thanks in advance!!

    June 5, 2020 at 7:35 am #1219691
    Rikard

    Hey kellyCraftMedia,

    Please try the following in Quick CSS under Enfold->General Styling:

    .av-inner-masonry-content-pos-content .avia-arrow {
  display: none;
}

.main_color .av-masonry-outerimage-container {
    background-color: #000;
}

    Best regards,
    Rikard

    June 5, 2020 at 10:30 pm #1219962
    Kelly Erickson

    Thanks! Worked except I’d also like to manipulate the level of opacity applied to the featured image on the grid. Is there a short code I can include for that?

    Cheers!

    June 7, 2020 at 5:58 am #1220133
    Rikard

    Hi,

    Please try this as well:

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 0.9;
}

    Best regards,
    Rikard

    July 2, 2020 at 2:43 am #1227357
    Kelly Erickson

    That didn’t seem to work even trying it at an opacity level of 1. I did clear cache on both my website and browser.

    Thanks again!

    July 3, 2020 at 5:50 am #1227632
    Rikard

    Hi,

    The page you linked to is giving me a 404 error, could you post a link to where we can see the results you are getting please?

    Best regards,
    Rikard

    July 3, 2020 at 9:09 pm #1227837
    Kelly Erickson

    Sorry about that, use the included link instead!

    July 5, 2020 at 6:59 am #1228001
    Rikard

    Hi,

    This code works when I test it in the browser:

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1;
}

    If it doesn’t on your end then please try this instead:

    .avia_desktop .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1 !important;
}

    Best regards,
    Rikard

    July 6, 2020 at 1:24 am #1228125
    Kelly Erickson

    Yeah it’s weird – I can’t seem to get it to work even with the !important addition. I’ve included a link to the screenshot of the mouseover effect just to make sure we’re talking about the same thing! I don’t mind the actual mouseover effect, it’s that the thumbnail/featured image is slightly opaque before mousing over.

    Thanks again!

    July 7, 2020 at 6:40 am #1228477
    Rikard

    Hi,

    Thanks for the update. Where are you adding the CSS? I’m asking since I can’t see it being added on your site. Could you post a admin login details in private so that we can try adding it for you please?

    Just to avoid any misunderstanding; you are looking to remove the overlay which is present without hovering, right?

    Best regards,
    Rikard

    July 7, 2020 at 7:04 am #1228479
    Kelly Erickson

    Hi Rikard! No worries just want to make sure we’re on the same page! I added the login in the private content. I did add the custom css to the Quick CSS section, and to answer your other question – yes! I’m trying to make the preview image without any opacity.

    Thanks!

    July 8, 2020 at 6:13 am #1228762
    Rikard

    Hi,

    Thanks for that. The login details are not working though, please check and verify.

    Error: The password you entered for the username Temp Admin is incorrect.

    Best regards,
    Rikard

    July 8, 2020 at 9:49 pm #1228999
    Kelly Erickson

    Hmm give it another go with the same user/password?

    July 10, 2020 at 5:37 am #1229308
    Rikard

    Hi,

    Thanks for that. You had an open bracket in your Quick CSS, I fixed that and the CSS is now applying. Please review your site.

    Best regards,
    Rikard

    July 10, 2020 at 10:04 pm #1229495
    Kelly Erickson

    You are the best – thank you so much! Sorry for all the back and forth. You can close this ticket now!

    July 12, 2020 at 6:04 am #1229739
    Rikard

    Hi,

    Great, I’m glad that we could help and thanks for the kind feedback. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Masonry grid as displaying portfolio entries’ is closed to new replies.