Site URL: https://fennel-tomato-k9rn.squarespace.com/config/settings
Password to view site: queso
Hey y'all,
I am trying to add a caption overlay to my gallery on the photo galleries page while keeping the masonry grid sizing the same. I found some code on here that I plugged into the CSS and tweaked with a little bit to get the caption overlay option, here is the following code:
/*GALLERY OVERLAY*/
.gallery-caption.gallery-caption-grid-masonry p {
opacity: 0 !important;
}
/* ------- GALLERY CAPTIONS --------*/
.gallery-caption-grid-masonry p.gallery-caption-content {
font-family: "Night";
font-size: 2vw !important;
font-weight: 500 !important;
text-transform: uppercase;
line-height: 1.2em;
color: #000000;
}
figure.gallery-masonry-item {
position: relative;
}
.gallery-caption {
position: static;
}
/* title */
.gallery-caption-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
background-color: #e0e0e0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding: 7%;
transition: opacity ease 1000ms !important;
opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
opacity: 75% !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
background: none; /* overlay color */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 100ms !important;
}
.gallery-masonry-item:hover .gallery-grid-item-wrapper a:after {
opacity: 0.50;
}
/* remove gap */
figcaption {
padding: 0 !important;
}
figure.gallery-grid-item {
position: relative;
}
.gallery-caption {
position: static;
}
/* title */
.gallery-caption-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
background-color: none;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding: 7%;
transition: opacity ease 1000ms !important;
opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
opacity: 25% !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
background: #e0e0e0; /* overlay color */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 100ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
opacity: 0.40;
}
/* remove gap */
figcaption {
padding: 0 !important;
}
@media only screen and (max-width: 1400px) {
.gallery-masonry .gallery-masonry-wrapper {
columns: 2;
column-gap: 0;
height: auto!important;
display: block!important;
padding: 0px;
}
.gallery-masonry-item-wrapper {
height: auto!important;
}
.gallery-masonry-item {
position: relative!important;
transform: none!important;
width: 100%!important;
display: block;
padding: 14px!important;
box-sizing: content-box;
}
.gallery-masonry .gallery-masonry-item img {
height: 100%!important;
width: 100%!important;
}
}
@media only screen and (max-width: 750px) {
.gallery-masonry .gallery-masonry-wrapper {
columns: 1;
column-gap: 0;
height: auto!important;
display: block!important;
padding: 0px;
}
.gallery-masonry-item-wrapper {
height: auto!important;
}
.gallery-masonry-item {
position: relative!important;
transform: none!important;
width: 100%!important;
display: block;
padding: 3px!important;
box-sizing: content-box;
}
.gallery-masonry .gallery-masonry-item img {
height: 100%!important;
width: 100%!important;
}
}
@media only screen and (max-width: 750px) { h1 {font-size:28px!important;}}
/*END OF GALLERY OVERLAY*/
While this code has helped me create an overlay option, it messed with the borders and resized the gallery images. I am trying to figure out how to get it to keep the masonry outlay which looks like this:
Thanks!