maggierae

Did you get this figured out?

On 7/25/2020 at 3:55 AM, digitalsuperhero said:

I am having a similar issue with the caption overlays. I made them such that they cover the image on hover but then the image not clickable. I will respond if I figure something out which might help here.

Sorry to be a bother Tuanphan! For some reason I'm having a bit of trouble with it still. When I set the code type to HTML and CSS, the hover doesn't show up. Any ideas? 

I have the code type set to HTML currently just so you can see it, in case that helps.

1 hour ago, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #f4f6ea; /* Overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

 

Is there any way to add the code to the overall CSS so that I don't have to upgrade (individual page CSS requires business plan)? If not, totally fine, it's worth it!  Thank you so much!

Yes, exactly like that! I tweaked the site layout a bit, but it's the same overlay goal. 

I'd love to change the color of the overlay if possible as well.

Done!

Site URL: http://www.maggiebrz.design

Hi everyone! 

I just switched from 7.0 to 7.1.  In the masonry gallery grid, I'm trying to add hover effects to my images- a color overlay and image caption on hover. I talked to customer support, and they told me that 7.1 doesn't support gallery hovers.  I'm having trouble with the code, and was wondering if anyone had more luck than I did? 

I've attached a screen shot of how the site is set up. I'm trying to keep the full-bleed effect.

I've been stuck in a rabbit hole working on this all day - thanks for the help!!