Weekend in Lisbon
Three days of tiles, tarts and trams.
Paper Fold Card Hover
A travel card folded into three zig-zag panels like a brochure. On hover the folds open flat. Each panel hangs from the one above it, so one rotation per panel drives the whole fold.
Also known as: unfold on hover, folded brochure css, zig zag fold card.
Travel guide
Lisbon
3 days, 12 stops, 1 tram
HTML
<div class="hfx-paper-fold">
<div class="hfx-paper-fold-panel hfx-paper-fold-p1">
<small>Travel guide</small>
<div class="hfx-paper-fold-panel hfx-paper-fold-p2">
<strong>Lisbon</strong>
<div class="hfx-paper-fold-panel hfx-paper-fold-p3">
<span>3 days, 12 stops, 1 tram</span>
</div>
</div>
</div>
</div>CSS
.hfx-paper-fold {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
width: 13em;
height: 8.1em;
perspective: 35em;
font-family: system-ui, sans-serif;
}
.hfx-paper-fold-panel {
position: relative;
display: flex;
align-items: center;
height: 2.7em;
padding: 0 1em;
transform-style: preserve-3d;
background:
radial-gradient(circle at 78% 44%, #fef3c7 0 5%, transparent 5.5%),
linear-gradient(color-mix(in srgb, var(--c) 25%, #fff), color-mix(in srgb, var(--c) 60%, #fff) 54%, var(--c) 54.5%, color-mix(in srgb, var(--c) 60%, #000));
background-size: 100% 300%;
transition: transform 0.6s cubic-bezier(0.3, 1.15, 0.4, 1);
}
.hfx-paper-fold-panel::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: #000;
opacity: 0.2;
pointer-events: none;
transition: opacity 0.6s ease;
}
.hfx-paper-fold-p1 {
border-radius: 0.5em 0.5em 0 0;
background-position: 0 0;
transform-origin: 50% 0;
transform: rotateX(34deg);
}
.hfx-paper-fold-p2,
.hfx-paper-fold-p3 {
position: absolute;
top: 100%;
left: 0;
right: 0;
transform-origin: 50% 0;
}
.hfx-paper-fold-p2 {
background-position: 0 50%;
transform: rotateX(-68deg);
transition-delay: 0.04s;
}
.hfx-paper-fold-p2::after {
background: #fff;
opacity: 0.15;
}
.hfx-paper-fold-p3 {
border-radius: 0 0 0.5em 0.5em;
background-position: 0 100%;
transform: rotateX(68deg);
transition-delay: 0.08s;
}
.hfx-paper-fold small {
font-size: 0.7em;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: color-mix(in srgb, var(--c) 70%, #000);
}
.hfx-paper-fold strong {
font-size: 1.5em;
color: #fff;
text-shadow: 0 0.05em 0.2em color-mix(in srgb, #000 30%, transparent);
}
.hfx-paper-fold span {
font-size: 0.8em;
color: #fff;
}
.hfx-paper-fold:hover .hfx-paper-fold-panel {
transform: rotateX(0deg);
}
.hfx-paper-fold:hover .hfx-paper-fold-panel::after {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.hfx-paper-fold, .hfx-paper-fold *, .hfx-paper-fold::before, .hfx-paper-fold::after, .hfx-paper-fold *::before, .hfx-paper-fold *::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.