Como ele é
Imagine uma foto quadrada, um pouco ampliada, dentro de uma moldura de cantos arredondados. Quando o cursor entra por um dos lados, a foto desliza até 20 pixels no sentido do movimento, como se fosse empurrada, e um texto branco surge no canto inferior esquerdo em 0,3 segundo. Na demo, título e descrição ficam sobre um degradê escuro que sobe da base. Ao sair, tudo volta ao lugar. O card é quadrado e cresce com a tela, de 192 a 448 pixels de lado. No celular, a legenda aparece enquanto o dedo toca o card.
Você pode estar procurando isto se pediu algo assim
- card de foto que mostra o texto só quando passo o mouse
- efeito de hover que sabe de que lado o mouse entrou
- grade de portfólio com legenda aparecendo em cima da imagem
- foto da equipe que mostra nome e cargo ao passar o mouse
- imagem que mexe um pouco para o lado quando o cursor chega
- cards de projetos com aquele efeito que entra pela direção do mouse
- deixar a galeria de trabalhos com cara de site de agência
Também chamado de
- direction aware hover
- hover direcional
- card com overlay no hover
- image hover card
- legenda no hover
- hover reveal card
Quando usar
- Grade de portfólio em que cada projeto mostra título e descrição no hover
- Página de equipe com foto, nome e cargo de cada pessoa
- Vitrine de coleções, destinos ou cases com imagem forte
- Seção de cases em site de agência ou estúdio
Quando evitar
- Informação essencial que precisa ficar visível sem hover, já que no celular a legenda some ao soltar o dedo
- Navegação só por teclado: o card original não reage ao foco
Como pedir para a sua IA
Crie uma grade de cards de foto com hover direcional: ao passar o mouse, a imagem desliza conforme o lado de entrada do cursor e uma legenda aparece por cima. Quero a legenda visível também no foco do teclado, toque funcionando no celular e transições curtas para movimento reduzido.
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 Direction Aware Hover Card
O Direction Aware Hover Card funciona no celular?
Funciona com toque. Em telas de até 768 pixels ou em aparelhos com toque, o Direction Aware Hover Card troca o hover pelo toque: a legenda aparece enquanto o dedo está no card e some logo depois de soltar, e em telas pequenas o card encolhe levemente ao ser pressionado. Para textos importantes, vale deixar a legenda sempre visível no celular.
O Direction Aware Hover Card respeita quem prefere menos movimento?
Em parte. Quando o sistema pede movimento reduzido, o Direction Aware Hover Card encurta todas as transições para 0,1 segundo, então a foto e a legenda mudam quase sem animação. O prompt do THM Componentes vai além e pede à IA uma versão estática para esse caso.
Dá para trocar a foto e o texto do Direction Aware Hover Card?
Sim. No Direction Aware Hover Card, a foto entra pela propriedade imageUrl e o texto vai dentro do componente, então cabe título, cargo, preço ou botão. Há classes extras para o card, a imagem e a legenda. O texto alternativo da imagem vem fixo no código original; vale pedir à IA que o receba como propriedade.
