Show what dismiss will close

One × closes the whole stack, so show the stack shrinking first.

Rauno Freibergrauno.me
My solution, albeit controversial, is to use motion. First, on hovering the dismiss button we collapse the peeking cards. This signals that the dismiss action relates to all of them.
Field Notes #5Read article ↗
Rauno Freibergrauno.me
Scaling down = shrinking = dismissing, close enough.
Field Notes #5Read article ↗

1 · Close the stack

Hover or focus the ×, then click. On touch, tap twice.

Silent ×Bad
Cards left3
Hover collapses stackGood
Cards left3
.stack:has(.close:is(:hover, :focus-visible)) .peek {
  transform: translateY(0) scale(0.9);   /* fold into the front card */
  opacity: 0;
}
.stack:has(.close:is(:hover, :focus-visible)) .front { transform: scale(0.97); }
/* touch has no hover: first tap previews, second tap dismisses */

Why it matters, pros and cons

Why it matters

A close button that removes three cards looks like it closes one. Showing the scope first makes it honest.

Pros

  • People see the blast radius before they commit to the click.
  • No confirm dialog or undo toast is needed for a small group.
  • Keyboard focus gets the same preview as the mouse.

Cons

  • Hover does not exist on touch, so it needs a two-tap fallback.
  • Motion carries the meaning, so reduced-motion users get a fade only.
  • A destructive group close may still want an undo.