Text and Color Overlay on Grid Gallery Hover with Personal Plan (Custom CSS)

Site URL: https://www.brooklynskyart.com/

I'm trying to have my Character Design/Storyboarding/Illustration Page galleries have a translucent color overlay with text that reads 'learn more' when you hover, so that a user is enticed to click (which would direct to a different page with more information)

Not particularly familiar with code, but it seems like it can be possible using the custom CSS included in the personal plan.

Hey, I found this code on a video which works great on desktop, but the colour overlay doesn't stay visible on mobile, just the text, which is unreadable. Here's the code: but anyone have any ideas to fix the mobile site?

@media only screen and (min-width:660px) {

}

This is not applied to a gallery but individual images when set to "poster" style. I had to "build" a gallery from a blank section for this to work. Not the most elegant solution all round, would love to know if anyone has something better!

On 3/26/2022 at 4:07 AM, tuanphan said:

Hi,

You want

• Initial: Show image, hide text
• Hover: Show overlay, show text over overflay, learn more is clickable

Is this right?

Add to Design > Custom CSS

/* Masonry hover */
body#collection-62186458656e122368cb6bad, body#collection-6218647946766907c24701d3 {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* 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;
}}

 

It worked great on my Character Design and Storyboard galleries, but for some reason didn't work on my Illustration gallery

On 3/31/2022 at 8:59 PM, brooklynskyart said:

It worked great on my Character Design and Storyboard galleries, but for some reason didn't work on my Illustration gallery

TO make it work on 3 pages, use this new code

/* Masonry hover */
body#collection-62186458656e122368cb6bad, body#collection-6218647946766907c24701d3, body#collection-6218648fd13c727c879700fa {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* 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;
}}

On 4/2/2022 at 6:11 AM, tuanphan said:

TO make it work on 3 pages, use this new code

/* Masonry hover */
body#collection-62186458656e122368cb6bad, body#collection-6218647946766907c24701d3, body#collection-6218648fd13c727c879700fa {
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* 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;
}}

 

Thank you!!