Magnifier Lens (lupa)
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
Variações
- Lens
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
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.Animações parecidas
Passe o mouse por cima
Hover Zoom
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.- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
Mova o ponteiro aqui
Cursor Spotlight
Também chamada Flashlight cursor, Spotlight effect
Um círculo de luz ao redor do ponteiro revela o conteúdo enquanto o resto fica escuro.
Onde usar
Seções hero, efeitos de revelação
Adicione um efeito "Cursor Spotlight" (também chamado flashlight cursor ou spotlight effect) em [onde].
Um círculo de luz suave deve seguir o ponteiro e revelar o conteúdo abaixo dele enquanto o resto da área fica escurecido.
Em dispositivos de toque, onde não há ponteiro para seguir, mostre o conteúdo totalmente iluminado.- A
- B
- C
- D
ABCD
Mova o ponteiro aqui
Cursor Image Hover
Também chamada Hover image follow, Image preview on hover
Uma imagem de prévia segue o ponteiro ao passar sobre um item de uma lista de texto.
Onde usar
Listas de projetos, menus
Adicione um efeito "Cursor Image Hover" (também chamado hover image follow ou image preview on hover) em [onde].
Enquanto o ponteiro estiver sobre um item de uma lista de texto, uma pequena imagem de prévia desse item deve flutuar ao lado do ponteiro, seguindo-o com um leve atraso suave e deslizando para a próxima imagem quando o ponteiro passar para outro item.
A prévia nunca deve bloquear cliques na lista, e a lista deve continuar totalmente utilizável sem ela no toque e no teclado.Mais em Image & Media
A
B
Arraste
Before-After Slider
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.Role aqui dentro
Image Reveal Wipe
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).