Jump to content

No overlay when hovering on a gallery image with url link

By Pementa, in Customize with code

Go to solution Solved by Lesum,

Recommended Posts

Pementa Level 4

Pementa

Posted
Posted

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
  • Replies 6
  • Views 942
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Beyondspace
Beyondspace

Can you share your URL so I can check it?

Pementa
Pementa

https://www.pementa.com/sol

Lesum
Lesum

@Pementa Hi! Remove this part from your existing code: /* overlay */ .gallery-grid-item-wrapper a:after { background: #38757d; /* overlay color */ content: ""; display: block; posit

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
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 - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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
Lesum Level 9

Lesum

Posted
  • Solution
Posted

@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
Beyondspace Level 14

Beyondspace

Posted
Posted
51 minutes ago, Pementa said:

https://www.pementa.com/sol

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 - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

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
Pementa Level 4

Pementa

Posted
  • Author
Posted
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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources