Jump to content

Link not working on CSS hover overlay effect on masonry grid.

By Sean_M, in Customize with code

Recommended Posts

Sean_M Level 1

Sean_M

Posted
Posted

Hi,

 

I'm having an issue after adding a custom CSS to add a colour overlay and captions to the images in the masonry grid.

The issue now is that the links don't click though anymore.

 

Here is the  current code.:

  

/* gallery Hover effect */

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
  position: static;
}
/* title */
.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-content {
    opacity: 1 !important;
    font-size: 20px !important;
    color: #FFFFFF;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #33CC99; /* 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;
}

Any help would be greatly appreciated.

Thanks,

Sean 

 

Link to comment
  • Replies 5
  • Views 833
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Beyondspace Level 14

Beyondspace

Posted
Posted
1 hour ago, Sean_M said:

Hi,

 

I'm having an issue after adding a custom CSS to add a colour overlay and captions to the images in the masonry grid.

The issue now is that the links don't click though anymore.

 

Here is the  current code.:

  


/* gallery Hover effect */

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
  position: static;
}
/* title */
.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-content {
    opacity: 1 !important;
    font-size: 20px !important;
    color: #FFFFFF;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #33CC99; /* 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;
}

Any help would be greatly appreciated.

Thanks,

Sean 

 

Could you send the current site with the effect

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more)
🗓️ 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
  • 1 year later...
KLAstudio Level 1

KLAstudio

Posted
Posted

Hi Bangank,

Having a similar issue that the images in my masonry gallery are not clickable. All the images have a page linked to them.

That's the page with the gallery. 
https://www.kla.studio/work

I am new to custom CSS and I tested a lot of tweaks throughout the site so I am not sure which piece of the code causes the issues. I copied all the custom CSS here just in case.

Could you please have a look and let me know if there is something I should change?
Thank you!

 

.header-title a {
    pointer-events: none;
}

#collection-6246cd8fedbbfb7242a693df .header-actions-action,
#collection-6246cd8fedbbfb7242a693df .header-menu-cta {
  display: none;
}

#collection-6246ee89f42e9d07e4be5feb .header-actions-action,
#collection-6246ee89f42e9d07e4be5feb .header-menu-cta {
  display: none;
}

body.homepage footer.sections {
    display: none;
}
.header-actions-action .btn {
    padding: 0px 0px;
    font-size: 10px;
    color: #808080 !important;
    background: none !important;
    border-color: none !important;
}


.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none !important;
}
.header-burger {
    display: none;
}
.spacer-block {
    display: block !important;
}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: flex-end; /* center vertically */
justify-content: left; /* center horizontally */
}
.gallery-caption-content {
font-size: 0.625rem !important; /* caption font size */
color: #808080; /*caption font color */
}
.gallery-masonry-item {
position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
opacity: 0.5;
}
.gallery-caption-masonry-simple {
transition-delay: 0ms;
}
.gallery-section .gallery-caption p {
  text-align: left;
  font-size: 10px;
  font-weight: 300;
  color: #808080;
  text-transform: normal;
  line-height: 1.0em;
  font-family: inherit;
  letter-spacing: 0.25em;
}
.gallery-section .gallery-caption {
 padding: 52px 0px 0px 0px;
}
.gallery-section .gallery-caption p:first-line {
    font-weight: bold;
    color: #505050;
}
@media (max-width: 576px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 5px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 0px!important;
        box-sizing: border-box;
      margin-bottom:70px
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
          width: 100%!important;
    }
}
@media (max-width: 576px) {.gallery-section .gallery-caption {
 padding: 55px 0px 0px 0px;
}}

Link to comment
tuanphan Level 18

tuanphan

Posted
Posted
On 4/19/2022 at 3:41 PM, KLAstudio said:

Hi Bangank,

Having a similar issue that the images in my masonry gallery are not clickable. All the images have a page linked to them.

That's the page with the gallery. 
https://www.kla.studio/work

I am new to custom CSS and I tested a lot of tweaks throughout the site so I am not sure which piece of the code causes the issues. I copied all the custom CSS here just in case.

Could you please have a look and let me know if there is something I should change?
Thank you!

 

.header-title a {
    pointer-events: none;
}

#collection-6246cd8fedbbfb7242a693df .header-actions-action,
#collection-6246cd8fedbbfb7242a693df .header-menu-cta {
  display: none;
}

#collection-6246ee89f42e9d07e4be5feb .header-actions-action,
#collection-6246ee89f42e9d07e4be5feb .header-menu-cta {
  display: none;
}

body.homepage footer.sections {
    display: none;
}
.header-actions-action .btn {
    padding: 0px 0px;
    font-size: 10px;
    color: #808080 !important;
    background: none !important;
    border-color: none !important;
}


.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none !important;
}
.header-burger {
    display: none;
}
.spacer-block {
    display: block !important;
}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: flex-end; /* center vertically */
justify-content: left; /* center horizontally */
}
.gallery-caption-content {
font-size: 0.625rem !important; /* caption font size */
color: #808080; /*caption font color */
}
.gallery-masonry-item {
position: relative;
}
.gallery-masonry-item:hover .gallery-caption {
opacity: 0.5;
}
.gallery-caption-masonry-simple {
transition-delay: 0ms;
}
.gallery-section .gallery-caption p {
  text-align: left;
  font-size: 10px;
  font-weight: 300;
  color: #808080;
  text-transform: normal;
  line-height: 1.0em;
  font-family: inherit;
  letter-spacing: 0.25em;
}
.gallery-section .gallery-caption {
 padding: 52px 0px 0px 0px;
}
.gallery-section .gallery-caption p:first-line {
    font-weight: bold;
    color: #505050;
}
@media (max-width: 576px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 5px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 0px!important;
        box-sizing: border-box;
      margin-bottom:70px
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
          width: 100%!important;
    }
}
@media (max-width: 576px) {.gallery-section .gallery-caption {
 padding: 55px 0px 0px 0px;
}}

Try changing this code 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
gppp96 Level 1

gppp96

Posted
Posted

I have the same issue.

Here the page

https://apricots-tunny-yy4c.squarespace.com/works

password Hiro96

 

Here is the current code :

 

body#collection-6279314ca417ed4a39ac61a0 {
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:after {
    background: rgba(255,255,255,0.6); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    z-index: 9999;
}
.gallery-masonry-item:hover .gallery-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figure:hover .gallery-masonry-item-wrapper:after {
    opacity: 1;
}}
body#collection-6279314ca417ed4a39ac61a0 {
figure p.gallery-caption-content:after {
    display: block;
    position: absolute;
    top: calc(~"50% + 10px");
}
figure:nth-child(1) p.gallery-caption-content:after {
    content: "Hiro | 2022";
}
figure:nth-child(2) p.gallery-caption-content:after {
    content: "Hiro | 2021";
}
figure:nth-child(3) p.gallery-caption-content:after {
    content: "Cyrcus | 2020";
}}
body#collection-6279314ca417ed4a39ac61a0 {
figure p.gallery-caption-content:after {
    display: block;
    position: absolute;
    top: calc(~"50% + 10px");
}
figure:nth-child(4) p.gallery-caption-content:after {
    content: "Hiro | 2021";
}
figure:nth-child(5) p.gallery-caption-content:after {
    content: "Prototype | 2020";
}}

 

 

Thanks a lot!

Link to comment
tuanphan Level 18

tuanphan

Posted
Posted
On 5/18/2022 at 8:42 PM, gppp96 said:

I have the same issue.

Here the page

https://apricots-tunny-yy4c.squarespace.com/works

password Hiro96

 

Here is the current code :

 

body#collection-6279314ca417ed4a39ac61a0 {
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:after {
    background: rgba(255,255,255,0.6); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    z-index: 9999;
}
.gallery-masonry-item:hover .gallery-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figure:hover .gallery-masonry-item-wrapper:after {
    opacity: 1;
}}
body#collection-6279314ca417ed4a39ac61a0 {
figure p.gallery-caption-content:after {
    display: block;
    position: absolute;
    top: calc(~"50% + 10px");
}
figure:nth-child(1) p.gallery-caption-content:after {
    content: "Hiro | 2022";
}
figure:nth-child(2) p.gallery-caption-content:after {
    content: "Hiro | 2021";
}
figure:nth-child(3) p.gallery-caption-content:after {
    content: "Cyrcus | 2020";
}}
body#collection-6279314ca417ed4a39ac61a0 {
figure p.gallery-caption-content:after {
    display: block;
    position: absolute;
    top: calc(~"50% + 10px");
}
figure:nth-child(4) p.gallery-caption-content:after {
    content: "Hiro | 2021";
}
figure:nth-child(5) p.gallery-caption-content:after {
    content: "Prototype | 2020";
}}

 

 

Thanks a lot!

Sent code

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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