Magnifier Lens (Lupe)
Auch genannt Lens, Loupe, Lens (Magnifier), Hover zoom lens
Eine runde Lupe folgt dem Zeiger und zeigt einen vergrößerten Ausschnitt des Bildes.
Einsatz
Produktdetailbilder
Varianten
- Lens
Prompt
Ersetze [wo] durch die Stelle auf deiner Seite und füge den Prompt in deinen KI-Agenten ein. Jeder Prompt enthält den Namen der Animation – beim nächsten Mal reicht es, sie beim Namen zu nennen.
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.Ähnliche Animationen
Mit der Maus darüberfahren
Hover Zoom
Auch genannt Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Ein Bild vergrößert sich beim Hovern in seinem Rahmen und schwenkt manchmal mit dem Zeiger mit.
Einsatz
Produktkarten, Vorschaubilder
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.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
Zeiger hier bewegen
Cursor Spotlight
Auch genannt Flashlight cursor, Spotlight effect
Ein Lichtkreis um den Zeiger enthüllt den Inhalt, während der Rest dunkel bleibt.
Einsatz
Hero-Bereiche, Enthüllungseffekte
Füge bei [wo] einen „Cursor Spotlight“-Effekt hinzu (auch flashlight cursor oder spotlight effect genannt).
Ein weicher Lichtkreis soll dem Zeiger folgen und den Inhalt darunter sichtbar machen, während der Rest des Bereichs abgedunkelt bleibt.
Zeige auf Touch-Geräten, wo es keinen Zeiger zum Folgen gibt, den Inhalt stattdessen voll ausgeleuchtet.- A
- B
- C
- D
ABCD
Zeiger hier bewegen
Cursor Image Hover
Auch genannt Hover image follow, Image preview on hover
Ein Vorschaubild folgt dem Zeiger, während er über einem Eintrag einer Textliste schwebt.
Einsatz
Projektlisten, Menüs
Füge bei [wo] einen „Cursor Image Hover“-Effekt hinzu (auch hover image follow oder image preview on hover genannt).
Solange der Zeiger über einem Eintrag einer Textliste ist, soll ein kleines Vorschaubild dieses Eintrags neben dem Zeiger schweben, ihm mit leichter, weicher Verzögerung folgen und zum nächsten Bild gleiten, wenn der Zeiger zu einem anderen Eintrag wechselt.
Die Vorschau darf nie Klicks auf die Liste blockieren, und die Liste muss auf Touch-Geräten und per Tastatur auch ohne sie voll nutzbar bleiben.Mehr aus Image & Media
A
B
Ziehen
Before-After Slider (Vorher-Nachher-Slider)
Auch genannt Image comparison slider, Compare slider
Ein ziehbarer Trenner zeigt auf der einen Seite ein Bild und auf der anderen ein zweites.
Einsatz
Bildretusche, Produktvergleiche
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.Darin scrollen
Image Reveal Wipe
Auch genannt Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
Ein Bild wird freigelegt, indem eine Abdeckung schrumpft oder eine Maskenkante sich ausdehnt.
Einsatz
Redaktionelle Bilder beim Scrollen
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.