Também chamada Image comparison slider, Compare slider
Um divisor arrastável revela uma imagem de um lado e outra do outro.
Onde usar
Retoque de fotos, comparações de produtos
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.
Também chamada Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Uma imagem aumenta dentro da moldura ao passar o ponteiro, às vezes se deslocando com ele.
Onde usar
Cards de produto, miniaturas
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.
Também chamada Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll
Uma imagem é revelada por uma cobertura que encolhe ou pela borda de uma máscara que se expande.
Onde usar
Imagens editoriais ao rolar a página
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).
Também chamada Slow pan and zoom, Ken Burns, Kenburns
Uma imagem estática aproxima e se desloca lentamente dentro da moldura.
Onde usar
Slideshows de hero, fundos
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).
Também chamada Image zoom overlay, Medium-style zoom
Uma miniatura aumenta a partir do seu lugar até uma visualização grande e centralizada sobre um fundo escurecido.
Onde usar
Galerias de imagens, artigos
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.
Também chamada Lens, Loupe, Lens (Magnifier), Hover zoom lens
Uma lente circular segue o ponteiro e mostra ampliada uma área da imagem.
Onde usar
Imagens de detalhes do produto
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.