Weekend in Lisbon
Three days of tiles, tarts and trams.
Stacked Toasts Hover Expand
Three toasts wait in a tidy stack with only the newest readable, then spread into a list on hover. One --i per toast drives both the stacked offset and the spread position.
Also known as: sonner toast hover, stacked notifications expand css, toast stack hover.
Invoice sentTo Globex, 4 min ago
Changes savedWorkspace settings, 1 min ago
Deploy finishedProduction, just now
HTML
<div class="hfx-toast-stack">
<div class="hfx-toast-stack-toast" style="--i: 2">
<span class="hfx-toast-stack-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m3.5 7 8.5 6 8.5-6"/></svg></span>
<span class="hfx-toast-stack-text"><b>Invoice sent</b><small>To Globex, 4 min ago</small></span>
</div>
<div class="hfx-toast-stack-toast" style="--i: 1">
<span class="hfx-toast-stack-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></span>
<span class="hfx-toast-stack-text"><b>Changes saved</b><small>Workspace settings, 1 min ago</small></span>
</div>
<div class="hfx-toast-stack-toast" style="--i: 0">
<span class="hfx-toast-stack-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 3 5 13.5h6L10 21l8-10.5h-6z"/></svg></span>
<span class="hfx-toast-stack-text"><b>Deploy finished</b><small>Production, just now</small></span>
</div>
</div>CSS
.hfx-toast-stack {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
width: 17em;
height: 3.1em;
font-family: system-ui, sans-serif;
}
/* an invisible strip that keeps the hover alive across the gaps once spread */
.hfx-toast-stack::before {
content: "";
position: absolute;
inset: -3.8em 0;
transform: scaleY(0);
}
.hfx-toast-stack:hover::before { transform: scaleY(1); }
.hfx-toast-stack-toast {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 0.7em;
padding: 0 0.9em;
border-radius: 0.8em;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0.5em 1.2em -0.5em rgba(15, 23, 42, 0.35);
color: #1f2937;
transform-origin: 50% 0;
transform: translateY(calc(var(--i) * -0.6em)) scale(calc(1 - var(--i) * 0.06));
transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-toast-stack-toast > * { transition: opacity 0.3s ease; }
.hfx-toast-stack-toast:not(:last-child) > * { opacity: 0; }
.hfx-toast-stack-icon {
flex: none;
display: grid;
place-items: center;
width: 1.9em;
height: 1.9em;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 15%, transparent);
color: var(--c);
}
.hfx-toast-stack-icon svg { width: 1.05em; height: 1.05em; }
.hfx-toast-stack-text { display: grid; line-height: 1.25; }
.hfx-toast-stack-text small { color: #6b7280; font-size: 0.8em; }
/* spread: the newest drops to the bottom, the oldest rises to the top */
.hfx-toast-stack:hover .hfx-toast-stack-toast { transform: translateY(calc((1 - var(--i)) * 3.6em)) scale(1); }
.hfx-toast-stack:hover .hfx-toast-stack-toast > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hfx-toast-stack, .hfx-toast-stack *, .hfx-toast-stack::before, .hfx-toast-stack::after, .hfx-toast-stack *::before, .hfx-toast-stack *::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.