Gallery Captions HOVER Squarespace 7.1 - image display error - please help!

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

Hi there, 

I've been using custom css to have captions appear when hovering on the image. They've been working great for a long time, but I checked the website earlier and the image is not displaying unless I hover over the image. 

I did add some extra code to the custom css the other day (changing responsiveness of gallery at certain media sizes), the site seemed to work ok at first, now it isnt.

Hopefully someone may be able to help 🙏

The website is; www.oscarmay.com

This is the code I have in place right now;

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



figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 1000ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 75% !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #e0e0e0; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 100ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.40;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

@media only screen and (max-width: 1400px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 14px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}



@media only screen and (max-width: 750px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 3px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}

@media only screen and (max-width: 750px) { h1 {font-size:28px!important;}}

3 hours ago, oscarmay_ said:

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

Hi there, 

I've been using custom css to have captions appear when hovering on the image. They've been working great for a long time, but I checked the website earlier and the image is not displaying unless I hover over the image. 

I did add some extra code to the custom css the other day (changing responsiveness of gallery at certain media sizes), the site seemed to work ok at first, now it isnt.

Hopefully someone may be able to help 🙏

The website is; www.oscarmay.com

This is the code I have in place right now;

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



figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 1000ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 75% !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #e0e0e0; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 100ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.40;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

@media only screen and (max-width: 1400px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 14px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}



@media only screen and (max-width: 750px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 3px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}

@media only screen and (max-width: 750px) { h1 {font-size:28px!important;}}

 

Hi,

You can try adding to Home > Design > Custom Css

.gallery-caption.gallery-caption-grid-masonry p {
  opacity: 0 !important;
}

Let me know if it works properly on your site

Press 👍 or mark this answer as solution to

That fixed it, thank you so much! 

Thanks so much for this code. Can you suggest a code that can increase the font and change its colour?

4 hours ago, fbook said:

Thanks so much for this code. Can you suggest a code that can increase the font and change its colour?

Can you share your site with the protected password?

fox,    thanks

On 4/25/2022 at 7:18 AM, fbook said:

fox,    thanks

 

 

If you still need help, please share site url, we can check easier

Thank you 🙂  Can you suggest a code that will allow these captions to only appear on rollovers?

The site's url is https://jaycefox.squarespace.com and the password is "fox"

Here is the code I am currently using...

p.gallery-caption-content {
    font-size: 22px !important;
}

figcaption.gallery-caption.gallery-caption-grid-masonry  {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
  img:hover
}

On 5/2/2022 at 11:59 PM, fbook said:

Thank you 🙂  Can you suggest a code that will allow these captions to only appear on rollovers?

The site's url is https://jaycefox.squarespace.com and the password is "fox"

 

 

Here is the code I am currently using...

 

 

p.gallery-caption-content {
    font-size: 22px !important;
}

figcaption.gallery-caption.gallery-caption-grid-masonry  {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
  img:hover
}

 

 

Can you enable caption first? I currently don't see any caption