Como ele é
Funciona como uma lupa de mão passando sobre uma foto. Quando o mouse entra na área, surge um círculo que cresce de leve e acompanha o cursor; dentro dele, o mesmo conteúdo surge ampliado, com o ponto sob o ponteiro parado no lugar e o entorno aumentado. Fora do círculo, a imagem continua normal. Quando o mouse sai, a lupa some. Diâmetro e aumento são ajustáveis, 170 pixels e 1,5 vez por padrão, e um modo fixo mantém a lupa sempre visível num ponto escolhido. Na demo, a foto fica num card escuro com raios de luz roxos, e o texto abaixo desfoca enquanto a lupa está ativa.
Você pode estar procurando isto se pediu algo assim
- lupa para ver detalhes da foto do produto passando o mouse
- zoom na imagem quando passo o cursor por cima
- círculo de aumento que segue o mouse sobre a foto
- mostrar os detalhes de uma planta de apartamento sem abrir outra página
- efeito de lente de aumento em imagem para loja virtual
- ampliar parte de um gráfico ou de uma imagem técnica com o mouse
Também chamado de
- lupa de imagem
- image magnifier
- zoom on hover
- lente de aumento
- magnifying glass effect
- hover zoom
- zoom de imagem
Quando usar
- Fotos de produto em que textura, acabamento ou costura fazem diferença
- Plantas de imóveis, mapas e imagens técnicas com detalhes pequenos
- Portfólio de fotografia, ilustração ou arquitetura
- Imagens de exames e laudos com áreas que pedem inspeção de perto
Quando evitar
- Sites acessados sobretudo pelo celular, já que a lupa depende do mouse
- Imagens pequenas ou de baixa resolução, que ficam borradas ao ampliar
Como pedir para a sua IA
Adicione uma lupa de imagem na foto do produto: ao passar o mouse, um círculo segue o cursor e mostra a região ampliada em 2 vezes, com uma alternativa de toque no celular, versão sem animação para movimento reduzido e texto alternativo descritivo.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Monóculo
Monóculo funciona no celular?
O componente Monóculo foi feito para mouse: reage ao cursor entrando, se movendo e saindo da área, e não tem eventos de toque próprios. No celular, o resultado depende de como cada navegador converte o toque. Se o público usa mais o celular, peça à IA um modo de toque ou use o modo fixo, que mantém a lupa visível num ponto.
Dá para usar Monóculo em vídeo ou em qualquer conteúdo?
Sim. Monóculo duplica o conteúdo que você coloca dentro do componente e mostra a cópia ampliada dentro do círculo, então serve para foto, vídeo ou um bloco de HTML. Com vídeo, são dois elementos tocando ao mesmo tempo, o que pesa mais; para fotos, prefira arquivos em alta resolução para o detalhe sair nítido.
Como ajustar o tamanho e o aumento de Monóculo?
Monóculo tem duas props para isso: lensSize define o diâmetro do círculo, 170 pixels por padrão, e zoomFactor define o aumento, 1,5 vez por padrão. Com isStatic, a lupa fica parada na posição definida em position, o que ajuda a destacar um detalhe sem depender do mouse.
