Some custom code/tricks for Gallery Reel on Squarespace.
Zoom Reel Image on Hover
Insert code to Design > Custom CSS
/* Zoom Reel Image on Hover */
.gallery-reel-list {
cursor: pointer;
}
figure.gallery-reel-item:hover img {
transform: scale(1.3) !important;
transition: all 0.3s;
}
figure.gallery-reel-item img {
transition: all 0.3s;
}
Show Caption under Reel Images
By default, only one caption appears under an image. But you want all captions to appear at the same time, then you can use this code
/* Show Reel Caption */
.gallery-reel .gallery-caption-reel {
opacity: 1 !important;
visibility: visible !important;
}
Show Overlay + Caption on Hover Reel Image
/* Reel hover */
.gallery-reel .gallery-caption-reel {
visibility: visible !important;
top: 50% !important;
margin: 0;
transition: all 0.3s;
z-index: 9999999;
}
figure:hover .gallery-caption-reel {
opacity: 1 !important;
transition: all 0.3s;
}
/* Overlay Color */
.gallery-reel-item-src:after {
content: "";
background-color: rgba(255,255,255,0.75);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
transition: all 0.3s;
}
figure:hover .gallery-reel-item-src:after {
opacity: 1;
transition: all 0.3s;
}
Add space between Reel Images
div.gallery-reel img {
transform: scale(0.95);
}