# Biruta Card de foto que mostra um texto por cima no hover e desliza a imagem conforme o lado por onde o cursor entrou. > Biruta é um componente do THM Componentes para grades de fotos: ao passar o mouse, a imagem desliza alguns pixels conforme o lado por onde o cursor entrou e uma legenda aparece por cima. Usa só Vue e Tailwind, sem biblioteca de animação, e serve para portfólios, equipes e vitrines de projetos. - Categoria: Cartões e superfícies - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/biruta/ ## 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 ```text 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. ## Componentes relacionados - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. - [Camafeu](https://vibecode.thmtecnologia.com/componentes/camafeu/): Um cartão que inclina seguindo o mouse e faz imagem, título e botões saltarem em camadas de profundidade. - [Persiana](https://vibecode.thmtecnologia.com/componentes/persiana/): Fotos lado a lado em faixas verticais; a que está sob o mouse se alarga e as outras se estreitam. - [Azulejo](https://vibecode.thmtecnologia.com/componentes/azulejo/): Fotos recortadas em losango que se encaixam como um mosaico e viram quadrado inteiro ao passar o mouse. - [Mergulho](https://vibecode.thmtecnologia.com/componentes/mergulho/): Ao passar o mouse, a foto se deforma como líquido e se transforma em uma segunda imagem. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.