Magnifier Lens (loupe)

Une image s’agrandit dans son cadre au survol, parfois en se déplaçant avec le pointeur.

Ajoute un zoom au survol (Hover Zoom), aussi appelé image zoom on hover ou zoom-pan, sur [où].
Tant que le pointeur est sur l’image, elle doit s’agrandir lentement et en douceur dans son cadre, qui garde sa taille, puis revenir en douceur quand il sort.
Rogne l’image à son cadre pour que rien ne déborde de la mise en page, et applique le même zoom au focus clavier.

Un cercle de lumière autour du pointeur révèle le contenu pendant que le reste reste sombre.

Ajoute un effet « Cursor Spotlight » (aussi appelé flashlight cursor ou spotlight effect) sur [où].
Un cercle de lumière doux doit suivre le pointeur et révéler le contenu en dessous pendant que le reste de la zone reste assombri.
Sur les appareils tactiles, où il n’y a pas de pointeur à suivre, affiche plutôt le contenu entièrement éclairé.

Une image d’aperçu suit le pointeur pendant le survol d’un élément d’une liste de texte.

Ajoute un effet « Cursor Image Hover » (aussi appelé hover image follow ou image preview on hover) sur [où].
Quand le pointeur survole un élément d’une liste de texte, une petite image d’aperçu de cet élément doit flotter à côté du pointeur, le suivre avec un léger retard fluide, et glisser vers l’image suivante quand le pointeur passe à un autre élément.
L’aperçu ne doit jamais bloquer les clics sur la liste, et la liste doit rester entièrement utilisable sans lui au toucher et au clavier.

Un séparateur déplaçable révèle une image d’un côté et une autre de l’autre.

Ajoute un comparateur avant/après (Before-After Slider), aussi appelé image comparison slider ou compare slider, sur [où].
Deux images sont superposées, et faire glisser un séparateur vertical dévoile davantage l’une et moins l’autre ; le séparateur suit directement le pointeur, sans retard.
Place le séparateur au milieu au départ, et fais-le fonctionner au toucher et avec les flèches du clavier.

Une image se découvre à mesure qu’un cache se rétracte ou que le bord d’un masque s’étend.

Ajoute un « Image Reveal Wipe » (aussi appelé mask reveal ou clip-path reveal) sur [où].
Quand l’image entre à l’écran au défilement, un cache doit s’effacer depuis un côté et la dévoiler en douceur au rythme du défilement, pour qu’elle soit entièrement visible bien avant de quitter l’écran.
Réserve l’espace de l’image pour que la mise en page ne saute pas, et affiche l’image entièrement dévoilée si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).