To achieve something like this, first enable the Captions in the Gallery Section editor:
Then add the following to Design > Custom CSS:
/**************************************
Move the Gallery Grid caption
from below the image to
centered on the image
**************************************/
figure.gallery-grid-item {
position: relative!important;
}
figcaption.gallery-caption.gallery-caption-grid-simple {
position: absolute!important;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align: center;
pointer-events: none;
}
/* Set color & size of caption font */
p.gallery-caption-content {
color: white;
font-size: 2rem!important;
}
This will centre the captions, increase the font-size and set the color to white (see last few lines).
Depending on the colour of the images and the caption colour that you choose, the captions may not be easy to read:
To resolve this you can add a drop shadow:
To do this, add something like this to the end of the custom CSS:
/* Optional drop shadow */
p.gallery-caption-content {
text-shadow: 2px 2px 4px #000;
}
If you would prefer an overlay behind the caption like this:
add the following instead of the drop shadow CSS:
/* Optional background */
figcaption.gallery-caption.gallery-caption-grid-simple {
background: rgba(0,0,0,0.2);
max-width:80%;
padding: 17px;
}
I hope this helps.
Did this help? Please give feedback by clicking an icon below ⬇️
You'll find fewer and fewer new websites use hover effects; on all platforms, not just Squarespace. This is because changes in technology - the popularity of mobile devices - are reshaping the user experience. It is better not to use hover effects unless they are required for desktop visitors and you have an alternative design for your mobile users that does not rely on hover effects.
Why? Because hover effects don't work on mobiles*. Hovering occurs when a visitor puts their cursor over an element but touchscreen devices don't have a cursor. This means that if you add a hover title to an image, your mobile users may never see it.
When you take into account that around 65%-80% of visits to Squarespace websites are now made on mobile devices, you can see how relying on hover effects could make your site unusable for more than half of your visitors.
*Some mobiles can simulate hovering by first triggering a hover state and then triggering a "click". However this "stickiness" can not only confuse visitors, it can also frustrate them when they are required to tap twice to "click" the element.
Did this help? Please give feedback by clicking an icon below ⬇️
