Hover Zoom (zoom au survol)

Une image fixe zoome et se déplace lentement dans son cadre.

Ajoute un « Ken Burns Effect » (aussi appelé slow pan and zoom) sur [où].
Pendant qu’elle est affichée, chaque image doit zoomer et glisser très lentement dans une seule direction, puis passer en fondu enchaîné à l’image suivante, qui se déplace dans une autre direction : calme et continu.
Fais en sorte que chaque image couvre tout son cadre à tout moment pour qu’aucun bord n’apparaisse, et garde les images immobiles si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une loupe ronde suit le pointeur et montre une zone agrandie de l’image.

Ajoute une loupe (Magnifier Lens), aussi appelée lens ou loupe, sur [où].
Une lentille ronde doit se placer juste sous le pointeur, sans retard, et montrer agrandie la partie de l’image qui se trouve dessous.
Garde la vue agrandie alignée sur le point exact sous le pointeur et, sur les écrans tactiles, affiche la loupe tant que le doigt reste posé sur l’image.

L’élément s’agrandit légèrement et en douceur quand le pointeur le survole.

Ajoute un effet au survol « Grow » (aussi appelé scale up) sur [où].
L’élément doit s’agrandir légèrement et en douceur tant que le pointeur est dessus, puis reprendre sa taille quand il sort : rapide et subtil.
Évite que la mise en page autour ne bouge et applique le même effet au focus clavier.

Une miniature s’agrandit depuis sa place jusqu’à une grande vue centrée sur un fond assombri.

Ajoute un « Lightbox Zoom » (aussi appelé image zoom overlay ou Medium-style zoom) sur [où].
Un clic sur une miniature doit la faire grandir en douceur depuis sa place jusqu’à une grande vue centrée pendant que la page derrière s’estompe, et la fermeture doit la faire rétrécir jusqu’à la même place.
Ferme-la avec Échap ou un clic sur le fond, place le focus dans la vue tant qu’elle est ouverte et rends-le à la miniature ensuite.

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).