Hover Zoom

Ein Standbild zoomt und schwenkt langsam innerhalb seines Rahmens.

Füge bei [wo] einen „Ken Burns Effect“ hinzu (auch slow pan and zoom genannt).
Solange ein Bild zu sehen ist, soll es sehr langsam zoomen und nur in eine Richtung wandern und dann in das nächste Bild überblenden, das sich in eine andere Richtung bewegt: ruhig und fortlaufend.
Lass jedes Bild seinen Rahmen jederzeit ganz ausfüllen, damit nie ein Rand sichtbar wird, und lass die Bilder bei reduzierter Bewegung (prefers-reduced-motion) still stehen.

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.

Das Element vergrößert sich weich ein wenig, solange der Zeiger darüber ist.

Füge bei [wo] einen „Grow“-Hover-Effekt hinzu (auch scale up genannt).
Das Element soll sich weich ein wenig vergrößern, solange der Zeiger darüber ist, und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Ein Vorschaubild wächst von seinem Platz aus zu einer großen, zentrierten Ansicht über einem abgedunkelten Hintergrund.

Füge bei [wo] einen „Lightbox Zoom“ hinzu (auch image zoom overlay oder Medium-style zoom genannt).
Ein Klick auf ein Vorschaubild soll es sanft von seinem Platz aus zu einer großen, zentrierten Ansicht wachsen lassen, während die Seite dahinter zurücktritt; beim Schließen schrumpft es an denselben Platz zurück.
Schließe es mit Escape oder einem Klick auf den Hintergrund, setze den Fokus in die Ansicht, solange sie offen ist, und gib ihn danach an das Vorschaubild zurück.

Ein Bild wird freigelegt, indem eine Abdeckung schrumpft oder eine Maskenkante sich ausdehnt.

Füge bei [wo] einen „Image Reveal Wipe“ hinzu (auch mask reveal oder clip-path reveal genannt).
Wenn das Bild ins Sichtfeld scrollt, soll eine Abdeckung von einer Seite wegwischen und es im Takt des Scrollens sanft freilegen, sodass es lange vor dem Verlassen des Bildschirms ganz offen ist.
Reserviere den Platz des Bildes, damit das Layout nicht springt, und zeige das Bild bei reduzierter Bewegung (prefers-reduced-motion) vollständig freigelegt.