Jump to content

No overlay when hovering on a gallery image with url link

Go to solution Solved by Lesum,

Recommended Posts

Hi!

I've added CSS code to have captions appear while hovering over each gallery image, but when I add links a nasty overlay appears. Can someone help me get rid of it?image.thumb.png.5b201ad2d55897eff2cd71cd0c683ebd.png

Here's some of the code:
 

/* caption from base to overlay in gallery - Desktop */
@media screen and (min-width:960px) {
  figure.gallery-grid-item {
    position: relative;
}
/* gallery caption font */
.gallery-caption {
    position: static;
    color: #38757D !important;
}
p.gallery-caption-content {
    font-size: 200% !important;
    overflow: hidden;
    color: #38757D;
    font-family: 'DM Serif Display' !important;
}
/* 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: right;
    align-items: flex-end;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #38757d; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

/* caption from base to overlay in gallery - Mobile */
@media screen and (max-width:959px) {
    figure.gallery-grid-item {
    position: relative;
}
/* gallery caption font */
.gallery-caption {
    position: static;
    color: #38757D !important;
}
p.gallery-caption-content {
    font-size: 100% !important;
    overflow: hidden;
    color: #38757D;
    font-family: 'DM Serif Display' !important;
}
/* 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: right;
    align-items: flex-end;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #38757d; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

 

Link to comment
2 hours ago, Pementa said:

Hi!

I've added CSS code to have captions appear while hovering over each gallery image, but when I add links a nasty overlay appears. Can someone help me get rid of it?image.thumb.png.5b201ad2d55897eff2cd71cd0c683ebd.png

Here's some of the code:
 

/* caption from base to overlay in gallery - Desktop */
@media screen and (min-width:960px) {
  figure.gallery-grid-item {
    position: relative;
}
/* gallery caption font */
.gallery-caption {
    position: static;
    color: #38757D !important;
}
p.gallery-caption-content {
    font-size: 200% !important;
    overflow: hidden;
    color: #38757D;
    font-family: 'DM Serif Display' !important;
}
/* 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: right;
    align-items: flex-end;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #38757d; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

/* caption from base to overlay in gallery - Mobile */
@media screen and (max-width:959px) {
    figure.gallery-grid-item {
    position: relative;
}
/* gallery caption font */
.gallery-caption {
    position: static;
    color: #38757D !important;
}
p.gallery-caption-content {
    font-size: 100% !important;
    overflow: hidden;
    color: #38757D;
    font-family: 'DM Serif Display' !important;
}
/* 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: right;
    align-items: flex-end;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #38757d; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
}

 

Can you share your URL so I can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

@Pementa Hi! Remove this part from your existing code:

/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #38757d; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
51 minutes ago, Pementa said:

This code sets a background color on your items.

image.thumb.png.277109d0ba7f334176666ad6f031e03c.png

You can try removing them

hope it makes sense

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
23 minutes ago, Lesum said:

@Pementa Hi! Remove this part from your existing code:

/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #38757d; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}

 

Thank you, worked like a charm.

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.