Hover Caption Overlay for ONLY one gallery page?

Hi! I have added hover to gallery...but I am trying to include captions on a different page which are not hovered/centered and obviously cannot do so. Is there a way to override the hover function for one page and/or to apply this hover function to ONLY one page? 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;}
.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 50px;
  font-weight: 500;
  color: #00394;
  text-transform: normal;
  line-height: 1.5em;
  font-family: inherit;
}.gallery-section .gallery-caption {
  background: rgba(104, 8, 37, .5);
  padding: 20px 0px;
}

To clarify: Looking to keep the hover on one page which is using a simple grid format...but not on other pages which use masonry grid. 

Site is: chartreuse-lime-7f5x.squarespace.com

Password: Votretoast1963

On 2/17/2022 at 3:06 AM, mopep said:

To clarify: Looking to keep the hover on one page which is using a simple grid format...but not on other pages which use masonry grid. 

 

Site is: chartreuse-lime-7f5x.squarespace.com

Password: Votretoast1963

For which page? If you use a Business Plan or higher, add this code to Page Header

<style>
  .gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;}
.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 50px;
  font-weight: 500;
  color: #000;
  text-transform: normal;
  line-height: 1.5em;
  font-family: inherit;
}.gallery-section .gallery-caption {
  background: rgba(104, 8, 37, .5);
  padding: 20px 0px;
}
</style>

If you use a Personal Plan, edit page >> Add a Code Block >> Paste the code

<style>
  .gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-grid-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;}
.gallery-section .gallery-caption p {
  text-align: center;
  font-size: 50px;
  font-weight: 500;
  color: #000;
  text-transform: normal;
  line-height: 1.5em;
  font-family: inherit;
}.gallery-section .gallery-caption {
  background: rgba(104, 8, 37, .5);
  padding: 20px 0px;
}
</style>

If you can't add Code Block, let me know & share page url, we will give new code