Weekend in Lisbon
Three days of tiles, tarts and trams.
Ticket Stub Fold Hover
A concert ticket whose stub folds over along the perforation on hover, landing face down on the ticket to show the QR code printed on its back. The stub hinges on its left edge.
Also known as: ticket fold animation, event ticket hover css, fold over reveal qr.
Live music
Neon Tide
Sat 12 Oct, 8 pm
Row F, seat 14
Admit one
HTML
<div class="hfx-ticket-stub-fold">
<div class="hfx-ticket-stub-fold-main">
<small>Live music</small>
<strong>Neon Tide</strong>
<span>Sat 12 Oct, 8 pm</span>
<span>Row F, seat 14</span>
</div>
<div class="hfx-ticket-stub-fold-stub">
<div class="hfx-ticket-stub-fold-front"><span>Admit one</span></div>
<div class="hfx-ticket-stub-fold-back">
<svg viewBox="0 0 21 21" aria-hidden="true"><path fill-rule="evenodd" d="M0 0h7v7H0zM1 1v5h5V1zM14 0h7v7h-7zM15 1v5h5V1zM0 14h7v7H0zM1 15v5h5v-5z"/><path d="M2 2h3v3H2zM16 2h3v3h-3zM2 16h3v3H2zM9 0h2v2H9zM12 2h1v3h-1zM8 4h3v1H8zM9 6h2v2H9zM8 9h2v2H8zM11 8h3v1h-3zM15 9h2v3h-2zM19 8h2v2h-2zM0 9h3v1H0zM3 11h3v2H3zM11 11h3v2h-3zM9 13h1v3H9zM17 13h3v1h-3zM12 15h3v2h-3zM8 17h3v2H8zM15 18h2v3h-2zM18 16h1v2h-1zM11 19h3v2h-3zM19 19h2v2h-2z"/></svg>
</div>
</div>
</div>CSS
.hfx-ticket-stub-fold {
--c: var(--hfx-color, #3b82f6);
--notch: radial-gradient(circle at 100% 0, transparent 0.5em, #000 0.52em) 0 0 / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 0.5em, #000 0.52em) 0 100% / 100% 51% no-repeat;
--notch-l: radial-gradient(circle at 0 0, transparent 0.5em, #000 0.52em) 0 0 / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 0.5em, #000 0.52em) 0 100% / 100% 51% no-repeat;
font-size: var(--hfx-size, 16px);
display: flex;
height: 6em;
perspective: 30em;
font-family: system-ui, sans-serif;
filter: drop-shadow(0 0.4em 0.6em color-mix(in srgb, var(--c) 25%, transparent));
}
.hfx-ticket-stub-fold-main {
display: flex;
flex-direction: column;
justify-content: center;
width: 10.8em;
padding: 0 1.1em;
border-radius: 0.6em 0 0 0.6em;
background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
color: #fff;
-webkit-mask: var(--notch);
mask: var(--notch);
}
.hfx-ticket-stub-fold-main small {
font-size: 0.6em;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.8;
}
.hfx-ticket-stub-fold-main strong {
margin-bottom: 0.25em;
font-size: 1.15em;
}
.hfx-ticket-stub-fold-main span {
font-size: 0.72em;
opacity: 0.9;
}
.hfx-ticket-stub-fold-stub {
position: relative;
width: 3.6em;
transform-origin: 0 50%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1.15);
}
.hfx-ticket-stub-fold-front,
.hfx-ticket-stub-fold-back {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: 0 0.6em 0.6em 0;
backface-visibility: hidden;
-webkit-mask: var(--notch-l);
mask: var(--notch-l);
}
.hfx-ticket-stub-fold-front {
background:
repeating-linear-gradient(transparent 0 0.3em, color-mix(in srgb, #fff 70%, transparent) 0.3em 0.55em) 0 0 / 2px 100% no-repeat,
color-mix(in srgb, var(--c) 70%, #000);
color: #fff;
}
.hfx-ticket-stub-fold-front span {
writing-mode: vertical-rl;
font-size: 0.7em;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.hfx-ticket-stub-fold-back {
border-radius: 0.6em 0 0 0.6em;
background: #fff;
-webkit-mask: var(--notch);
mask: var(--notch);
transform: rotateY(180deg);
}
.hfx-ticket-stub-fold-back svg {
width: 2.6em;
height: 2.6em;
fill: #111827;
}
.hfx-ticket-stub-fold:hover .hfx-ticket-stub-fold-stub {
transform: rotateY(-180deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-ticket-stub-fold, .hfx-ticket-stub-fold *, .hfx-ticket-stub-fold::before, .hfx-ticket-stub-fold::after, .hfx-ticket-stub-fold *::before, .hfx-ticket-stub-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.