Lightbox Zoom

Um card cresce até virar uma tela de detalhes completa, mantendo um único contêiner visível que muda de forma e revela o novo conteúdo.

Adicione uma transição "Container Transform" (também chamada card expand to detail ou expandable card) em [onde].
Ao abrir o card, o mesmo contêiner deve crescer suavemente até a tela de detalhes completa, com o conteúdo antigo sumindo rápido e o novo aparecendo quando o crescimento estiver quase no fim; ao fechar, toca ao contrário.
Mantenha um único contêiner contínuo em vez de um fade entre duas caixas separadas, e mova o foco para a tela de detalhes quando ela abrir.

Um elemento correspondente, como uma miniatura, se transforma em posição e tamanho de uma página para a seguinte.

Adicione uma "Shared Element Transition" (também chamada hero transition ou view-transition-name morph) em [onde].
Ao ir para a página seguinte, o elemento correspondente, como uma miniatura, deve se mover e crescer suavemente até o seu lugar na nova página enquanto o resto do conteúdo faz um crossfade, e encolher de volta ao retornar.
Dê aos elementos correspondentes das duas páginas uma mesma identidade compartilhada para que se emparelhem corretamente e use um crossfade simples quando o navegador não conseguir transformá-los.

Um diálogo aparece enquanto cresce levemente a partir do centro, sobre uma página escurecida.

Adicione uma animação "Modal Scale-Fade In" (também chamada dialog open animation ou zoom-fade dialog) em [onde].
O diálogo deve aparecer enquanto cresce levemente a partir do centro e a página de trás escurece: rápido e sutil, sem quique.
Reproduza uma vez sempre que o diálogo abrir, mova o foco para ele e mantenha-o lá dentro, e use só um fade simples se o usuário preferir movimento reduzido (prefers-reduced-motion).

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.

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.