Isolate hover actions for galleries on separate pages

13 hours ago, AnnaJacobs said:

Site URL: https://superdeluxe.squarespace.com/

 

I’d like to implement a similar hover action on two different pages. On one page, I want it to function as a link, while on the other page, I’d like to disable the link functionality.

Below is the code I'm using to ensure that this Superlab page has image rollovers with captions displayed. I don't want these to link anywhere; I just have the rollover action.  

However, it's blocking normal linking on this Work page. For these items, I'd like the rollover to function the same (color overlay, caption displayed) but link to the interior pages they are supposed to. 

Any advice on how to adapt or supplement the code is appreciated. 

 

https://superdeluxe.squarespace.com/

pw: superdev

 

/* Gallery hover - with No Link */
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
	inset: 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;
	font-size: 32px;
  	text-align: center;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"]:after {
    background: #966848; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after {
    opacity: 0.85;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

[data-section-id="67098a92797e3f7021c891c7"] .gallery-grid-item .gallery-grid-image-link:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}