Weekend in Lisbon
Three days of tiles, tarts and trams.
Fanned Photo Stack Image Hover
Three prints lie in a loose pile; hover and the two underneath fan out left and right while the top one lifts. Handy for album covers and folders. Each print has its own springy transform.
Also known as: stacked photos hover, fan out cards hover, photo pile spread.
HTML
<div class="hfx-image-stack-fan"> <div class="hfx-image-stack-fan-photo" role="img" aria-label="Night sky"></div> <div class="hfx-image-stack-fan-photo" role="img" aria-label="Sunset at sea"></div> <div class="hfx-image-stack-fan-photo" role="img" aria-label="Mountains"></div> </div>
CSS
.hfx-image-stack-fan {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
width: 10em;
height: 7.2em;
}
.hfx-image-stack-fan-photo {
position: absolute;
inset: 0;
border: 0.3em solid #fff;
border-radius: 0.4em;
box-shadow: 0 0.25em 0.6em rgb(15 23 42 / 0.22), 0 0 0 1px rgb(15 23 42 / 0.08);
transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.hfx-image-stack-fan-photo:nth-child(1) {
background:
radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
transform: rotate(-7deg);
}
.hfx-image-stack-fan-photo:nth-child(2) {
background:
radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
transform: rotate(5deg);
}
.hfx-image-stack-fan-photo:nth-child(3) {
background:
radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-stack-fan:hover .hfx-image-stack-fan-photo:nth-child(1) {
transform: translate(-4.2em, 0.3em) rotate(-12deg);
}
.hfx-image-stack-fan:hover .hfx-image-stack-fan-photo:nth-child(2) {
transform: translate(4.2em, 0.3em) rotate(12deg);
transition-delay: 0.04s;
}
.hfx-image-stack-fan:hover .hfx-image-stack-fan-photo:nth-child(3) {
transform: translateY(-0.4em) scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.hfx-image-stack-fan, .hfx-image-stack-fan *, .hfx-image-stack-fan::before, .hfx-image-stack-fan::after, .hfx-image-stack-fan *::before, .hfx-image-stack-fan *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.