Hover Zoom

Uma imagem estática aproxima e se desloca lentamente dentro da moldura.

Adicione um "Ken Burns Effect" (também chamado slow pan and zoom) em [onde].
Enquanto cada imagem é exibida, ela deve aproximar e se deslocar bem devagar em uma única direção, depois fazer um crossfade para a próxima imagem, que se move em outra direção: calmo e contínuo.
Faça cada imagem cobrir toda a moldura o tempo todo para nenhuma borda aparecer, e deixe as imagens paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma lente circular segue o ponteiro e mostra ampliada uma área da imagem.

Adicione uma lupa ("Magnifier Lens", também chamada lens ou loupe) em [onde].
Uma lente redonda deve ficar logo abaixo do ponteiro, sem atraso, e mostrar ampliada a parte da imagem embaixo dela.
Mantenha a visualização ampliada alinhada ao ponto exato sob o ponteiro e, em telas touch, mostre a lente enquanto o dedo estiver pressionado sobre a imagem.

O elemento aumenta um pouco, de forma suave, quando o ponteiro está sobre ele.

Adicione um efeito de hover "Grow" (também chamado scale up) em [onde].
O elemento deve aumentar um pouco, de forma suave, enquanto o ponteiro estiver sobre ele, e voltar ao tamanho quando sair: rápido e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.

Uma miniatura aumenta a partir do seu lugar até uma visualização grande e centralizada sobre um fundo escurecido.

Adicione um "Lightbox Zoom" (também chamado image zoom overlay ou Medium-style zoom) em [onde].
Clicar em uma miniatura deve fazê-la crescer suavemente a partir do próprio lugar até uma visualização grande e centralizada enquanto a página ao fundo escurece, e fechar deve encolhê-la de volta ao mesmo lugar.
Feche com Escape ou com um clique no fundo, leve o foco para a visualização enquanto estiver aberta e devolva o foco à miniatura depois.

Uma imagem é revelada por uma cobertura que encolhe ou pela borda de uma máscara que se expande.

Adicione um "Image Reveal Wipe" (também chamado mask reveal ou clip-path reveal) em [onde].
Quando a imagem entrar na tela ao rolar, uma cobertura deve se retirar a partir de um lado e revelá-la suavemente no ritmo da rolagem, para que fique totalmente visível bem antes de sair da tela.
Reserve o espaço da imagem para o layout não pular e mostre a imagem totalmente revelada se o usuário preferir movimento reduzido (prefers-reduced-motion).