Jump to content

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

Recommended Posts

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

 

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 5 months later...
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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
}

 

 

Screen Shot 2022-05-02 at 7.20.28 PM.png

Edited by fbook
More information added
Link to comment
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
}

 

 

Screen Shot 2022-05-02 at 7.20.28 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.