Lightbox Zoom

Eine Karte wächst zur vollständigen Detailansicht, wobei ein einziger sichtbarer Container seine Form ändert und neue Inhalte zeigt.

Füge bei [wo] einen „Container Transform“-Übergang hinzu (auch card expand to detail oder expandable card genannt).
Wenn die Karte geöffnet wird, soll derselbe Container weich zur vollständigen Detailansicht wachsen: Der alte Inhalt blendet schnell aus, und der neue blendet ein, wenn das Wachsen fast fertig ist; beim Schließen läuft es rückwärts.
Halte es als einen durchgehenden Container statt einer Überblendung zwischen zwei getrennten Boxen, und setz den Fokus beim Öffnen in die Detailansicht.

Ein passendes Element, etwa ein Vorschaubild, verwandelt sich in Position und Größe von einer Seite zur nächsten.

Füge bei [wo] eine „Shared Element Transition“ hinzu (auch Hero Transition oder view-transition-name morph genannt).
Beim Wechsel zur nächsten Seite soll das passende Element, etwa ein Vorschaubild, sanft an seinen Platz auf der neuen Seite gleiten und wachsen, während der übrige Inhalt überblendet, und beim Zurückgehen wieder schrumpfen.
Gib den passenden Elementen auf beiden Seiten eine gemeinsame Identität, damit sie richtig zusammenfinden, und nutze eine einfache Überblendung, wo der Browser sie nicht verwandeln kann.

Ein Dialog blendet über der abgedunkelten Seite ein und wächst dabei leicht aus seiner Mitte.

Füge bei [wo] eine „Modal Scale-Fade In“-Animation hinzu (auch dialog open animation oder zoom-fade dialog genannt).
Der Dialog soll einblenden und dabei leicht aus seiner Mitte wachsen, während die Seite dahinter abdunkelt: schnell und dezent, ohne Nachfedern.
Spiel sie bei jedem Öffnen einmal ab, setz den Fokus in den Dialog und halte ihn dort, und nutze bei reduzierter Bewegung (prefers-reduced-motion) nur ein einfaches Einblenden.

Ein Bild vergrößert sich beim Hovern in seinem Rahmen und schwenkt manchmal mit dem Zeiger mit.

Füge bei [wo] einen „Hover Zoom“-Effekt hinzu (auch image zoom on hover oder zoom-pan genannt).
Solange der Zeiger über dem Bild ist, soll es sich langsam und weich in seinem Rahmen vergrößern, während der Rahmen seine Größe behält, und beim Verlassen sanft zurückgehen.
Schneide das Bild auf seinen Rahmen zu, damit nichts über das Layout hinausragt, und zeige denselben Zoom beim Tastaturfokus.

Eine runde Lupe folgt dem Zeiger und zeigt einen vergrößerten Ausschnitt des Bildes.

Füge bei [wo] eine Lupe (Magnifier Lens) hinzu, auch lens oder loupe genannt.
Eine runde Linse soll ohne Verzögerung direkt unter dem Zeiger sitzen und den Bildteil darunter vergrößert zeigen.
Halte die vergrößerte Ansicht genau auf den Punkt unter dem Zeiger ausgerichtet und zeige die Lupe auf Touch-Geräten, solange der Finger auf dem Bild liegt.

Ein ziehbarer Trenner zeigt auf der einen Seite ein Bild und auf der anderen ein zweites.

Füge bei [wo] einen Vorher-Nachher-Slider (Before-After Slider) hinzu, auch image comparison slider oder compare slider genannt.
Zwei Bilder liegen übereinander, und das Ziehen eines senkrechten Trenners zeigt mehr vom einen und weniger vom anderen; der Trenner folgt dem Zeiger direkt ohne Verzögerung.
Starte mit dem Trenner in der Mitte und lass ihn per Touch und mit den Pfeiltasten bedienen.