Ken Burns Effect

Uma imagem aumenta dentro da moldura ao passar o ponteiro, às vezes se deslocando com ele.

Adicione um efeito "Hover Zoom" (também chamado image zoom on hover ou zoom-pan) em [onde].
Enquanto o ponteiro estiver sobre a imagem, ela deve aumentar lenta e suavemente dentro da moldura, que mantém o tamanho, e voltar suavemente quando o ponteiro sai.
Recorte a imagem na moldura para nada vazar do layout e mostre o mesmo zoom no foco do teclado.

Um elemento ou uma cena aumenta ou diminui conforme o usuário rola a página.

Adicione um efeito "Zoom on Scroll" (também chamado de scroll zoom ou scale on scroll) em [onde].
Enquanto a seção fica presa na tela, o elemento deve crescer suavemente de um card pequeno até ocupar a tela inteira, no ritmo da rolagem, e encolher de novo ao rolar para cima.
Faça a escala sem empurrar o layout ao redor e mostre-o no tamanho final, sem zoom, se o usuário preferir movimento reduzido (prefers-reduced-motion).

Camadas se movem em velocidades diferentes conforme a rolagem, criando sensação de profundidade.

Adicione um efeito de rolagem "Parallax" (também chamado parallax scrolling ou parallax layers) em [onde].
As camadas de fundo devem se mover mais devagar que o conteúdo ao rolar a página, com a camada mais distante se movendo menos, para uma sensação sutil de profundidade.
Mantenha o efeito ligado à posição de rolagem sem atraso, deixe o texto na camada de velocidade normal, e desative o efeito se o usuário preferir movimento reduzido (prefers-reduced-motion).

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

Um divisor arrastável revela uma imagem de um lado e outra do outro.

Adicione um "Before-After Slider" (também chamado image comparison slider ou compare slider) em [onde].
Duas imagens ficam sobrepostas e, ao arrastar um divisor vertical, aparece mais de uma e menos da outra; o divisor segue o ponteiro diretamente, sem atraso.
Comece com o divisor no meio e faça funcionar com toque e com as setas do teclado.