Grow

Das Element vergrößert sich schnell und federt mit einem kleinen Plopp zurück.

Füge bei [wo] einen „Pop“-Hover-Effekt hinzu.
Bei jedem Eintritt des Zeigers soll das Element einmal schnell anschwellen und wieder auf seine normale Größe zurückgehen, wie ein kleiner federnder Plopp.
Spiele ihn einmal pro Hover ab, statt die größere Größe zu halten oder zu loopen, und verhindere, dass sich das umgebende Layout verschiebt.

Das Element skaliert mit elastischem Überschwingen, wenn das Hovern beginnt oder endet.

Füge bei [wo] einen „Bounce Scale“-Hover-Effekt hinzu (auch bounce in / out genannt).
Das Element soll sich federnd und sichtbar überschwingend etwas vergrößern, kurz über seine Endgröße hinausgehen und sich dann setzen, und beim Verlassen genauso zurückfedern.
Verhindere, dass sich das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

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.

Icons in einer Reihe wachsen weich, wenn sich der Zeiger nähert, wie im macOS-Dock.

Füge bei [wo] einen „Dock Magnification“-Effekt hinzu (auch dock genannt).
Die Icons der Reihe sollen weich größer werden, je näher der Zeiger kommt, das nächste am größten und seine Nachbarn leicht vergrößert, und alle zur normalen Größe zurückkehren, wenn der Zeiger die Reihe verlässt.
Lass die Icons von einer festen Grundlinie aus nach oben wachsen und halte jedes Icon bei Touch und Tastatur in normaler Größe bedienbar.

Beim Hovern leert sich der gefüllte Hintergrund, sodass nur ein umrandeter Button bleibt.

Füge bei [wo] einen „Hollow“-Hover-Effekt hinzu (auch ghost fill genannt).
Der gefüllte Hintergrund soll ausblenden, sodass nur die Kontur bleibt, und die Beschriftung soll die Farbe wechseln, damit sie auf dem leeren Hintergrund lesbar bleibt: weich und schnell.
Halte die Rahmenstärke in beiden Zuständen gleich, damit sich die Größe des Elements nicht ändert, und zeige denselben Effekt beim Tastaturfokus.

Ein Verlaufsrahmen bewegt sich um das Element und breitet sich aus, sobald der Zeiger darüber ist.

Füge bei [wo] einen „Hover Border Gradient“-Effekt hinzu.
Ein kurzer Verlaufsschimmer soll auf einem Teil des Rahmens ruhen; solange der Zeiger über dem Element ist, soll er gleichmäßig um den Rahmen wandern, während der ganze Rahmen mit sanftem Glühen heller wird.
Animiere den Rahmen nur beim Hovern und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Beim Hovern erscheint unter dem Element ein weicher Schatten oder wird tiefer und deutet so Erhöhung an.

Füge bei [wo] einen „Hover Shadow“-Effekt hinzu (auch drop shadow on hover oder elevation on hover genannt).
Ein weicher Schatten unter dem Element soll tiefer und breiter werden, solange der Zeiger darüber ist, damit es angehoben wirkt, und beim Verlassen wieder zurückgehen, während das Element selbst an seinem Platz bleibt.
Halte den Schatten dezent genug für helle und dunkle Themes und zeige denselben Effekt beim Tastaturfokus.