Mobile versionHier ist mein aktueller HTML-Code für den Image Viewer: < /p>
/* ===== Lightbox ===== */
/* Hidden state */
.lb[hidden] {
display: none !important;
}
/* Lightbox container */
.lb {
position: fixed;
inset: 0;
z-index: 1300;
display: grid;
grid-template-rows: 1fr auto;
pointer-events: none;
}
.lb.show {
pointer-events: auto;
}
/* --- White blurred overlay (smooth cinematic fade) --- */
.lb-backdrop {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px) saturate(160%);
opacity: 0;
transform: scale(1.02);
transition:
opacity 0.45s cubic-bezier(0.3, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.3, 0, 0.2, 1);
will-change: opacity, transform;
z-index: 1;
}
.lb.show .lb-backdrop {
opacity: 1;
transform: scale(1);
}
/* --- Top chrome: close & arrows --- */
.lb-chrome {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 56px;
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
pointer-events: none;
padding: 8px 10px;
z-index: 3;
opacity: 0;
transform: translateY(-8px);
transition:
opacity 0.3s ease 0.25s,
transform 0.3s ease 0.25s;
}
.lb.show .lb-chrome {
opacity: 1;
transform: translateY(0);
}
/* --- Close & nav buttons --- */
.lb-close,
.lb-nav {
pointer-events: auto;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-shadow: var(--shadow);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
transition: transform 0.12s ease, background 0.12s ease;
}
.lb-close:hover,
.lb-nav:hover {
transform: translateY(-1px);
background: #fff;
}
.lb-close {
justify-self: start;
}
.lb-prev {
justify-self: end;
margin-right: 8px;
}
.lb-next {
justify-self: end;
}
/* --- Stage & track --- */
.lb-stage {
position: relative;
height: 100vh;
display: grid;
place-items: center;
padding: 56px 0 120px;
box-sizing: border-box;
z-index: 2;
}
.lb-track {
display: flex;
align-items: center;
height: 100%;
transition:
transform 0.25s ease,
opacity 0.45s ease;
will-change: transform, opacity;
touch-action: pan-y;
opacity: 0;
}
.lb.show .lb-track {
opacity: 1;
}
/* --- Each slide --- */
.lb-slide {
min-width: 100vw;
height: calc(100vh - 176px);
display: grid;
place-items: center;
padding: 0 20px;
box-sizing: border-box;
}
/* --- Image reveal animation --- */
.lb-slide img {
max-width: 100%;
max-height: calc(100vh - 200px);
object-fit: contain;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
-webkit-user-drag: none;
user-select: none;
touch-action: pan-y;
cursor: grab;
opacity: 0;
transform: scale(0.985);
transition:
opacity 0.45s ease 0.12s,
transform 0.45s cubic-bezier(0.3, 0, 0.2, 1) 0.12s;
}
.lb.show .lb-slide img {
opacity: 1;
transform: scale(1);
}
.lb-track.dragging .lb-slide img {
cursor: grabbing;
}
/* --- Caption card --- */
.lb-caption {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow: var(--shadow);
color: var(--ink);
font-size: 16px;
font-weight: 600;
max-width: min(88ch, 90vw);
text-align: center;
padding: 10px 14px;
opacity: 0;
transition:
opacity 0.35s ease 0.25s,
transform 0.35s ease 0.25s;
will-change: opacity, transform;
z-index: 3;
}
.lb.show .lb-caption {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* --- Reverse animation tweaks ---
(caption and buttons fade out earlier) */
.lb:not(.show) .lb-caption,
.lb:not(.show) .lb-chrome {
transition-delay: 0s !important; /* remove the fade-in delay */
transition-duration: 0.25s; /* quicker fade-out */
opacity: 0;
/* transform: translateY(-8px); */
}
/* --- Hide body scroll when open --- */
body.lb-open {
overflow: hidden;
}
/* --- Purchase note under caption --- */
.lb-purchase-note {
position: absolute;
left: 50%;
bottom: 12px; /* slightly below the caption */
transform: translateX(-50%) translateY(8px);
display: inline-flex;
gap: 8px;
align-items: center;
justify-content: center;
flex-wrap: wrap; /* allow wrapping when narrow */
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 6px 12px;
font-size: 0.9rem;
color: #111;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.06);
opacity: 0;
transition: opacity 0.28s ease, transform 0.28s ease;
z-index: 4;
/* max-width: 90%; fits content but not wider than 90% */
text-align: center; /* keeps wrapped text centered */
width: max-content;
max-width: 99%;
}
.lb.show .lb-purchase-note {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.lb-purchase-note a {
font-weight: 600;
text-decoration: none;
color: #0a66ff;
white-space: nowrap;
transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
color 0.25s ease; /* optional */
transform-origin: center center; /* ensures smooth scaling from center */
}
.lb-purchase-note a:hover {
transform: scale(1.02);
/* color: #0048d1; optional slightly darker blue */
}
/* Stage: leave more space for caption + purchase note */
.lb-stage {
padding: 56px 0 160px; /* was 120px */
}
/* Image a touch smaller so caption doesn't overlap footer/contact area */
.lb-slide img {
max-height: calc(100vh - 240px); /* was calc(100vh - 200px) */
}
.lb-caption {
bottom: 60px;
}
/* On small screens, tighten a bit more */
@media (max-width: 600px) {
.lb-stage { padding: 56px 0 170px; }
.lb-slide img { max-height: calc(100vh - 260px); }
}
/* --- Responsive tweak for narrow screens --- */
@media (max-width: 380px) {
.lb-purchase-note {
flex-direction: column; /* stack text + link vertically */
gap: 4px;
gap: 0;
padding: 8px 10px;
}
.lb-caption {
bottom: 90px;
}
}< /code>
Code: Select all
Interested in this piece?
[url=#contact]Contact to purchase[/url]
