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
- overlay pela direção do mouse
- 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 Biruta
Biruta funciona no celular?
Funciona com toque. Em telas de até 768 pixels ou em aparelhos com toque, Biruta 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.
Biruta respeita quem prefere menos movimento?
Em parte. Quando o sistema pede movimento reduzido, Biruta 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 de Biruta?
Sim. Em Biruta, 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.
