SHUTTERPRESS / Gallery Templates
One gallery.
Ten personalities.
Ten CSS-only treatments, each rendered by the real ShutterPress Gallery widget. All ten use the same eight photographs and the masonry settings of the widget you added. The image arrangement is unchanged; every difference comes from CSS applied to native image, title, caption and icon elements.
Copy a style: enable Show image title in your gallery template, enable the actions you want, and paste one complete snippet into Gallery Template → Custom CSS. The template supplies the gallery scope, so no ID or HTML changes are needed. Image titles and credits come from the existing Media Library fields. If native caption output is off, the CSS displays the widget’s existing caption attribute.
Hover the images and controls to explore each treatment. The outside-image designs reserve space within the card. Each code block includes its base styling and reduced-motion rules.
01 / Editorial dusk
Serif headline over a dark lower gradient; pearl icons at the top right. The photo slowly zooms beneath the type.
No more pages to load
View & copy the complete CSS — Editorial dusk
Paste this complete snippet into Gallery Template → Custom CSS. Enable Show Image Title in the template and the favourite, download and purchase actions you want in the gallery. The CSS supplies every visual rule used by example 1, including type, gradient, corners, icon styling and animation. It needs no extra HTML or classes; layout, columns and gaps stay under the gallery’s own settings.
/* Editorial dusk — Gallery Template > Custom CSS */
/* Repeating the native item class gives these rules priority over template defaults.
No gallery ID, extra class or HTML change is required. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { border-radius:14px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { border-left:3px solid #efb779; padding-left:12px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { left:35px; max-width:calc(100% - 55px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { left:35px; max-width:calc(100% - 55px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:hover img { transform:scale(1.06); }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
/* Use the existing caption attribute if native caption output is off. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after {
content:attr(data-caption); pointer-events:none;
}
02 / Minimal photo notes
A square-edged photograph with a quiet white footer. The serif title sits on the left, the original photo credit below it, and simple outline action icons line up on the right—without pills, shadows or a photo overlay.
No more pages to load
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
View & copy the complete CSS — Minimal photo notes
Paste this complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. The photo credit comes from the widget’s existing caption attribute. No extra HTML or gallery layout changes are needed.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Minimal photograph + title, credit and plain action icons. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner {
position:relative; box-sizing:border-box; width:100%; height:100%;
padding:0 0 94px; overflow:visible; border:0; border-radius:0;
background:#fff; transform:none !important; box-shadow:none !important;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container {
position:static; width:100%; height:100%; overflow:visible;
padding:0; border:0; border-radius:0; background:transparent;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:0; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img {
display:block; width:100%; height:100%; max-width:100%;
object-fit:cover; padding:0; border:0; border-radius:0; background:none;
filter:none; transform:none !important; box-shadow:none;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container {
position:absolute; inset:0; display:block; padding:0;
background:none; border:0; border-radius:0; transform:none;
pointer-events:none;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line {
display:none !important;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title {
position:absolute; inset:auto 128px 50px 0; display:block;
width:auto; max-width:none; margin:0; padding:0;
border:0; background:none; color:#372f25; text-align:left;
font:500 clamp(20px,1.45vw,26px)/1.15 Georgia,serif;
letter-spacing:-.025em; opacity:1 !important; transform:none;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { display:none !important; }
/* Read the original photo credit directly from the native image link. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after {
content:attr(data-caption); position:absolute; inset:auto 0 15px;
display:block; width:auto; max-width:none; margin:0; padding:0;
color:#705d48; text-align:left;
font:400 12px/1.4 Arial,sans-serif;
pointer-events:none; z-index:30;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container {
position:absolute; inset:auto 0 44px; height:32px; padding:0;
overflow:visible; opacity:1 !important; pointer-events:none; z-index:35;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block {
position:absolute; inset:auto 0 0 auto;
display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
gap:9px; padding:0; margin:0; border:0; border-radius:0;
background:transparent; box-shadow:none; transform:none; pointer-events:none;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * {
display:inline-flex; align-items:center; justify-content:center;
flex:0 0 32px; width:32px; height:32px; max-width:none;
padding:0; margin:0; border:0; border-radius:0; background:transparent;
color:#372f25; box-shadow:none; transform:none; pointer-events:auto;
transition:color .2s ease;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg {
width:25px; height:25px; stroke:currentColor; fill:none; stroke-width:1.8;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#8c6e43; background:transparent; transform:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:2px solid #8c6e43; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#bc3554; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { stroke:currentColor; fill:currentColor; }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; }
}
/* In masonry, add the footer after the photo instead of taking space from it. */
.sp-gallery-masonry-item.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item {
box-sizing:content-box;
}
.sp-gallery-masonry-item.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner {
height:calc(100% + 94px);
}
03 / Vertical field notes
A vertical headline climbs the left edge. Compact credits sit at the bottom, while the icons form a sliding rail on the right.
No more pages to load
View & copy the complete CSS — Vertical field notes
Paste the complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. Credits use the widget’s existing caption attribute when native caption output is disabled. No HTML changes or extra classes are required.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Vertical field notes — Gallery Template > Custom CSS */
/* CSS only. Native gallery structure and layout remain unchanged. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { border-radius:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { background:linear-gradient(90deg,#14241cbb,transparent 65%),linear-gradient(transparent 65%,#14241cbb); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:18px auto 68px 14px; writing-mode:vertical-rl; transform:rotate(180deg); font:600 23px/1.1 Georgia,serif; letter-spacing:.02em; max-width:40px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 16px 16px 16px; font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 16px 16px 16px; font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { inset:50% 12px auto auto; transform:translateY(-50%); flex-direction:column; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { background:#e4edce; border-radius:6px; color:#1e382d; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:hover .sp-gallery-image-icons { transform:translate(-5px,-50%); }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
/* Use the existing caption attribute if native caption output is off. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after {
content:attr(data-caption); pointer-events:none;
}
04 / Postcard stamps
The title becomes a cream stamp at the upper left, the photo credit a small lower-right label, and the actions line up at the lower left.
No more pages to load
View & copy the complete CSS — Postcard stamps
Paste the complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. Credits use the widget’s existing caption attribute when native caption output is disabled. No HTML changes or extra classes are required.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Postcard stamps — Gallery Template > Custom CSS */
/* CSS only. Native gallery structure and layout remain unchanged. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { border-radius:0; border:7px solid #fff3df; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { background:transparent; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:14px 14px auto 14px; max-width:70%; width:fit-content; padding:9px 12px; background:#fff3df; color:#593923; font:700 14px/1.2 Arial,sans-serif; text-transform:uppercase; letter-spacing:.06em; transform:rotate(-3deg); box-shadow:3px 3px 0 #593923; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 12px 13px auto; width:48%; padding:7px; background:#fff3dfe8; color:#593923; text-align:right; font-size:10px; transform:rotate(2deg); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 12px 13px auto; width:48%; padding:7px; background:#fff3dfe8; color:#593923; text-align:right; font-size:10px; transform:rotate(2deg); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { inset:auto auto 14px 12px; flex-direction:column; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { border-radius:0; background:#fff3df; color:#593923; box-shadow:3px 3px 0 #593923; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { transform:rotate(-9deg); background:#593923; color:#fff3df; }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
/* Use the existing caption attribute if native caption output is off. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after {
content:attr(data-caption); pointer-events:none;
}
05 / Crimson reveal
A rose-coloured curtain slides over the photograph. Bold centred type and staggered icons appear together on hover or keyboard focus.
No more pages to load
View & copy the complete CSS — Crimson reveal
Paste the complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. Credits use the widget’s existing caption attribute when native caption output is disabled. No HTML changes or extra classes are required.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Crimson reveal — Gallery Template > Custom CSS */
/* CSS only. Native gallery structure and layout remain unchanged. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { background:#9b1642ee; transform:translateY(101%); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:23% 18px auto; max-width:none; text-align:center; text-transform:uppercase; font:800 clamp(22px,2.8vw,40px)/1 Arial,sans-serif; letter-spacing:-.05em; transform:translateY(24px); opacity:0 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:58% 18px auto; max-width:none; text-align:center; transform:translateY(24px); opacity:0 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:58% 18px auto; max-width:none; text-align:center; transform:translateY(24px); opacity:0 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { inset:auto auto 16px 50%; transform:translateX(-50%); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { opacity:0; transform:translateY(20px); background:#fff; color:#9b1642; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:nth-child(2) { transition-delay:.06s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:nth-child(3) { transition-delay:.12s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) .sp-gallery-overlay-container::before { transform:translateY(0); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) :is(.sp-gallery-image-title,.sp-gallery-image-caption) { transform:none; opacity:1 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) .sp-gallery-item-lightbox::after { transform:none; opacity:1 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) .sp-gallery-image-icons > * { transform:none; opacity:1; }
@media (hover:none) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { transform:none; background:linear-gradient(transparent,#9b1642ee); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { opacity:1 !important; transform:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { opacity:1 !important; transform:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
/* Use the existing caption attribute if native caption output is off. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after {
content:attr(data-caption); pointer-events:none;
}
06 / Museum label
A paper border and a generous lower shelf move the title, credit and icons outside the photograph, like a museum’s artwork label.
No more pages to load
View & copy the complete CSS — Museum label
Paste the complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. Credits use the widget’s existing caption attribute when native caption output is disabled. No HTML changes or extra classes are required.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Museum label — Gallery Template > Custom CSS */
/* CSS only. Native gallery structure and layout remain unchanged. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { padding:10px 10px 124px; background:#f3eee4; overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { border-radius:0; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { display:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 14px 90px 14px; max-width:calc(100% - 28px); color:#32291e; font:500 21px/1.1 Georgia,serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 14px 56px 14px; max-width:calc(100% - 28px); color:#63523e; font-size:10px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 14px 56px 14px; max-width:calc(100% - 28px); color:#63523e; font-size:10px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { inset:auto 12px 10px auto; gap:8px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { border-radius:0; background:transparent; color:#32291e; box-shadow:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { background:#32291e; color:#f3eee4; transform:translateX(-4px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:hover img { filter:saturate(.65); }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
/* Use the existing caption attribute if native caption output is off. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after {
content:attr(data-caption); pointer-events:none;
}
/* Preserve the original photo ratio inside the paper border in masonry. */
.sp-gallery-masonry-item.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item {
height:auto !important;
}
.sp-gallery-masonry-item.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner {
box-sizing:content-box; width:auto; height:auto; aspect-ratio:inherit;
}
07 / Apricot sidecar
A dedicated action gutter sits outside the photo. An oversized italic headline rests over the image and the credit becomes a vertical annotation.
No more pages to load
View & copy the complete CSS — Apricot sidecar
Paste the complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. Credits use the widget’s existing caption attribute when native caption output is disabled. No HTML changes or extra classes are required.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Apricot sidecar — Gallery Template > Custom CSS */
/* CSS only. Native gallery structure and layout remain unchanged. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { padding:9px 62px 9px 9px; background:#ffb87f; border-radius:16px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { border-radius:10px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { inset:9px 62px 9px 9px; background:linear-gradient(transparent 30%,#392119dd); border-radius:10px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 76px 28px 22px; max-width:calc(100% - 98px); color:#fff8ee; font-style:italic; font-size:clamp(20px,2.8vw,34px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:14px 15px auto auto; width:28px; max-width:none; max-height:34%; overflow:hidden; writing-mode:vertical-rl; color:#522f1f; font-size:9px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:14px 15px auto auto; width:28px; max-width:none; max-height:34%; overflow:hidden; writing-mode:vertical-rl; color:#522f1f; font-size:9px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { inset:auto 13px 14px auto; flex-direction:column; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { background:#522f1f; color:#fff8ee; border-radius:10px; box-shadow:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { transform:rotate(12deg); background:#fff8ee; color:#522f1f; }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
/* Use the existing caption attribute if native caption output is off. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after {
content:attr(data-caption); pointer-events:none;
}
08 / Flip-side photo cards
The photograph forms the front of each card. Hover or use keyboard focus to turn it over and reveal its title, photo credit and favourite, download and purchase icons on a deep-blue back. Touch devices show the same information as an overlay.
No more pages to load
View & copy the complete CSS — Flip-side photo cards
Paste this complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired action icons. Hover or focus a card to reveal its back. Photo credits come from the widget’s existing caption attribute. Touch devices use an information overlay. No gallery HTML or layout changes are needed.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Flip card: native photo front, native title and actions on the back. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner {
position:relative; width:100%; height:100%; padding:0;
border-radius:16px; background:transparent; overflow:visible;
perspective:1200px; transform:none !important; box-shadow:none !important;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { position:static; width:100%; height:100%; overflow:visible; border-radius:16px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img {
display:block; width:100%; height:100%; object-fit:cover;
border-radius:16px; filter:none; backface-visibility:hidden;
transform:rotateY(0deg); transform-origin:center;
transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container {
position:absolute; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:0;
box-sizing:border-box; padding:24px 20px 112px;
border-radius:16px; background:#152d3e; color:#fff;
text-align:center; backface-visibility:hidden;
transform:rotateY(-180deg); transform-origin:center;
transition:transform .7s cubic-bezier(.22,.61,.36,1);
pointer-events:none; z-index:30;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before {
content:"PHOTO DETAILS"; position:static; inset:auto;
width:auto; height:auto; margin:0 0 12px; padding:0;
background:none; opacity:1 !important; transform:none;
font:600 10px/1.2 Arial,sans-serif; letter-spacing:.18em;
color:#a8d7c2; order:0;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::after {
content:"Save a favourite, download this photo or explore print options.";
position:static; inset:auto; max-width:27ch; margin:12px 0 0;
font:400 12px/1.5 Arial,sans-serif; color:#d1e0e8; order:2;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title {
position:static; inset:auto; display:block; width:100%; max-width:none;
margin:0; padding:0; border:0; background:none;
color:#fff; text-align:center; opacity:1 !important;
font:500 clamp(22px,2.4vw,32px)/1.12 Georgia,serif;
letter-spacing:-.025em; transform:none; order:1;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container { display:none !important; }
/* The widget already stores the photo credit on its image link. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after {
content:attr(data-caption); position:absolute; inset:auto 24px 70px;
max-width:calc(100% - 48px); margin:0; padding:0;
font:400 10px/1.4 Arial,sans-serif; color:#b9d1dc;
text-align:center; pointer-events:none; z-index:40;
backface-visibility:hidden; transform:rotateY(-180deg);
transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container {
position:absolute; inset:auto 16px 18px; padding:0;
display:flex; justify-content:center; opacity:1 !important;
pointer-events:inherit; z-index:45;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block {
position:static; inset:auto; display:flex; align-items:center;
justify-content:center; flex-direction:row; gap:8px;
padding:0; margin:0; border:0; border-radius:0; background:transparent;
transform:none; pointer-events:inherit;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * {
display:inline-flex; align-items:center; justify-content:center;
flex:0 0 38px; width:38px; height:38px; max-width:none;
padding:0; border:1px solid #ffffff40; border-radius:50%;
background:#254659; color:#fff; box-shadow:none;
pointer-events:inherit; transition:background .2s,transform .2s;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:19px; height:19px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { background:#a8d7c2; color:#152d3e; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #a8d7c2; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#ff91ae; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { stroke:currentColor; fill:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) .sp-gallery-image-container img { transform:rotateY(180deg); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) .sp-gallery-overlay-container { transform:rotateY(0deg); pointer-events:auto; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) .sp-gallery-item-lightbox::after { transform:rotateY(0deg); }
/* Touch devices show an accessible information overlay instead of requiring hover. */
@media (hover:none) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { transform:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container {
transform:none; backface-visibility:visible; pointer-events:auto;
justify-content:flex-end;
background:linear-gradient(transparent 0%,#152d3ee8 35%,#152d3e 100%);
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { transform:none; backface-visibility:visible; }
}
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * {
transition:none !important; animation:none !important;
}
}
09 / Midnight film
A black frame, condensed uppercase title below the photo, and glowing medallions crossing its lower edge. Credits fade into the image.
No more pages to load
View & copy the complete CSS — Midnight film
Paste the complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. Credits use the widget’s existing caption attribute when native caption output is disabled. No HTML changes or extra classes are required.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Midnight film — Gallery Template > Custom CSS */
/* CSS only. Native gallery structure and layout remain unchanged. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { padding:8px 8px 104px; background:#101015; border-radius:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { border-radius:0; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { inset:8px 8px 104px; background:linear-gradient(transparent 65%,#101015cc); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 16px 26px; max-width:calc(100% - 32px); color:#fff; font:800 18px/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; text-align:center; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 18px 132px; max-width:calc(100% - 36px); text-align:center; font-size:9px; opacity:0 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 18px 132px; max-width:calc(100% - 36px); text-align:center; font-size:9px; opacity:0 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { inset:auto auto 84px 50%; transform:translateX(-50%); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { background:#b8a4ff; color:#231541; border:3px solid #101015; box-shadow:0 0 16px #b8a4ff33; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:hover .sp-gallery-image-caption { opacity:1 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:hover .sp-gallery-item-lightbox::after { opacity:1 !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { transform:translateY(-5px) scale(1.1); background:#fff; color:#231541; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { filter:contrast(1.1) saturate(.5); }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
/* Use the existing caption attribute if native caption output is off. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after {
content:attr(data-caption); pointer-events:none;
}
10 / Marching green frame
A segmented green border travels around each photograph on hover or keyboard focus, while the image returns from half greyscale to full colour. Squared action buttons and a fine green title marker echo the frame.
No more pages to load
View & copy the complete CSS — Marching green frame
Paste this complete snippet into Gallery Template → Custom CSS. Enable native image titles and your desired icons. Change --g, --b and --c to adjust the gap, border thickness and colour. No HTML or gallery layout changes are required.
/* Repeated native item classes override template defaults without extra HTML or gallery IDs. */
/* Marching green frame — Gallery Template > Custom CSS */
/* CSS only. Native gallery structure and layout remain unchanged. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner { position:relative; box-sizing:border-box; overflow:hidden; border-radius:0; transform:none !important; box-shadow:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:hidden; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { width:100%; height:100%; object-fit:cover; border-radius:inherit; transform:none; transition:transform .55s ease,filter .55s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container { position:absolute; inset:0; display:block; color:#fff; text-align:left; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before { content:""; position:absolute; inset:0; width:auto; height:auto; background:linear-gradient(transparent 30%,#111827e8); opacity:1 !important; transition:background .4s,opacity .4s; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-icon-container,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-center-line { display:none !important; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { position:absolute; display:block; margin:0; padding:0; z-index:25; color:#fff; text-align:left; opacity:1 !important; max-width:calc(100% - 40px); transition:transform .45s ease,opacity .45s ease; overflow-wrap:anywhere; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title { inset:auto 20px 56px 20px; font:600 clamp(19px,2vw,30px)/1.15 Georgia,serif; letter-spacing:-.025em; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after { inset:auto 20px 20px 20px; font:400 11px/1.4 Arial,sans-serif; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons-container { position:absolute; inset:0; padding:0; opacity:1 !important; z-index:35; pointer-events:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { position:absolute; inset:16px 16px auto auto; display:flex; flex-direction:row; justify-content:center; align-items:center; gap:6px; padding:0; margin:0; background:transparent; border:0; border-radius:0; transform:none; pointer-events:none; transition:transform .4s ease,gap .4s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { display:inline-flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px; max-width:none; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:#fff; color:#17202a; pointer-events:auto; box-shadow:0 3px 12px #0002; transition:transform .3s ease,background .3s ease,color .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * svg { width:18px; height:18px; stroke:currentColor; fill:none; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { color:#fff; background:#c52350; transform:translateY(-3px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:focus-visible { outline:3px solid #f95a82; outline-offset:3px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image { color:#c52350; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-like-icon.sp-gallery-liked-image svg { fill:currentColor; stroke:currentColor; }
/* Moving segmented border, inspired by your gradient treatment. */
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner {
--g:4px; --b:12px; --c:#669706;
--_c:#0000 0 25%,var(--c) 0 50%;
--_g1:repeating-linear-gradient(90deg,var(--_c)) repeat-x;
--_g2:repeating-linear-gradient(180deg,var(--_c)) repeat-y;
padding:calc(var(--g) + var(--b));
border-radius:0; background-color:#f5f5eb;
background:
var(--_g1) var(--_p,25%) 0,
var(--_g2) 0 var(--_p,125%),
var(--_g1) var(--_p,125%) 100%,
var(--_g2) 100% var(--_p,25%);
background-image:repeating-linear-gradient(90deg,#0000 0 25%,var(--c) 0 50%),repeating-linear-gradient(180deg,#0000 0 25%,var(--c) 0 50%),repeating-linear-gradient(90deg,#0000 0 25%,var(--c) 0 50%),repeating-linear-gradient(180deg,#0000 0 25%,var(--c) 0 50%) !important;
background-position:var(--_p,25%) 0,0 var(--_p,125%),var(--_p,125%) 100%,100% var(--_p,25%);
background-color:#f5f5eb;
background-size:200% var(--b),var(--b) 200%,200% var(--b),var(--b) 200%;
background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;
transition:background-position .3s ease;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) .sp-gallery-item-inner { --_p:75%; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { border-radius:0; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img { filter:grayscale(50%); transition:filter .3s ease; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:is(:hover,:focus-within) img { filter:grayscale(0%); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-overlay-container::before {
inset:calc(var(--g) + var(--b));
background:linear-gradient(transparent 25%,#12210ae8);
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title {
inset:auto 30px 62px; max-width:calc(100% - 60px);
font:500 clamp(20px,2.2vw,30px)/1.1 Georgia,serif;
padding-left:10px; border-left:3px solid #a7d344; color:#fff;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after {
inset:auto 30px 30px; max-width:calc(100% - 60px);
color:#eff7df; font:400 10px/1.4 Arial,sans-serif;
}
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons.sp-gallery-icon-block { inset:26px 26px auto auto; gap:5px; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { border-radius:0; background:#f5f5eb; color:#365500; box-shadow:3px 3px 0 #365500; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > *:hover { background:#365500; color:#fff; transform:translate(-2px,-2px); }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container { overflow:visible; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox { position:static; border-radius:inherit; }
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item:not(:has(.sp-gallery-image-caption)) .sp-gallery-item-lightbox::after { content:attr(data-caption); pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-inner,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-container img,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-title,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-caption,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-item-lightbox::after,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons,
.sp-gallery-item.sp-gallery-item.sp-gallery-item.sp-gallery-item .sp-gallery-image-icons > * { transition:none !important; animation:none !important; }
}
Real widgets, native content. Every example uses the ShutterPress Gallery widget with native titles, captions, favourite, download and purchase icons. Styling changes only the existing elements. The CSS does not set gallery columns, gaps, item widths, outer item positions or row heights.
Outside-image treatments use internal padding, so their cards have room for type and actions. On this draft page, styles are isolated to each example; the copyable snippets rely on the gallery template’s automatic scope. The source gallery and its live template remain unchanged.
