Weekend in Lisbon
Three days of tiles, tarts and trams.
Accordion Fold Image Hover
A landscape cut into five vertical strips that pleat into an accordion on hover, alternate strips turning toward and away from the light. Each strip slides in so the folds stay joined.
Also known as: folding image hover, pleated image effect, zig zag fold css.
HTML
<div class="hfx-accordion-fold-image"> <span style="--i: 0"></span> <span style="--i: 1"></span> <span style="--i: 2"></span> <span style="--i: 3"></span> <span style="--i: 4"></span> </div>
CSS
.hfx-accordion-fold-image {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
display: flex;
perspective: 30em;
}
.hfx-accordion-fold-image span {
position: relative;
width: 2.6em;
height: 8em;
background:
radial-gradient(circle at 30% 34%, #fffbeb 0 9%, transparent 9.5%),
radial-gradient(60% 42% at 18% 100%, color-mix(in srgb, var(--c) 75%, #000) 98%, transparent),
radial-gradient(70% 55% at 78% 100%, color-mix(in srgb, var(--c) 55%, #000) 98%, transparent),
radial-gradient(90% 62% at 48% 100%, color-mix(in srgb, var(--c) 70%, #fff) 98%, transparent),
linear-gradient(color-mix(in srgb, var(--c) 18%, #fff), color-mix(in srgb, var(--c) 45%, #fff));
background-size: 500% 100%;
background-position: calc(var(--i) * 25%) 0;
transition: transform 0.5s cubic-bezier(0.35, 1.1, 0.45, 1);
}
.hfx-accordion-fold-image span:first-child {
border-radius: 0.6em 0 0 0.6em;
}
.hfx-accordion-fold-image span:last-child {
border-radius: 0 0.6em 0.6em 0;
}
.hfx-accordion-fold-image span::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: #fff;
opacity: 0;
transition: opacity 0.5s ease;
}
.hfx-accordion-fold-image span:nth-child(even)::after {
background: #000;
}
.hfx-accordion-fold-image:hover span:nth-child(odd) {
transform: translateX(calc((2 - var(--i)) * 0.61em)) rotateY(40deg);
}
.hfx-accordion-fold-image:hover span:nth-child(even) {
transform: translateX(calc((2 - var(--i)) * 0.61em)) rotateY(-40deg);
}
.hfx-accordion-fold-image:hover span::after {
opacity: 0.12;
}
.hfx-accordion-fold-image:hover span:nth-child(even)::after {
opacity: 0.28;
}
@media (prefers-reduced-motion: reduce) {
.hfx-accordion-fold-image, .hfx-accordion-fold-image *, .hfx-accordion-fold-image::before, .hfx-accordion-fold-image::after, .hfx-accordion-fold-image *::before, .hfx-accordion-fold-image *::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.