# Azulejo Fotos recortadas em losango que se encaixam como um mosaico e viram quadrado inteiro ao passar o mouse. > Azulejo é um componente do THM Componentes que monta um mosaico de fotos recortadas em losango, encaixadas em fileiras desencontradas. Ao passar o mouse, a foto escolhida se abre em quadrado, ganha cor mais viva e fica por cima, enquanto as outras escurecem. Usa só CSS e serve para páginas de equipe e sobre nós. - Categoria: Imagem e mídia - 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 - URL: https://vibecode.thmtecnologia.com/componentes/azulejo/ ## Como ele é Lembra um painel de azulejos girados na diagonal. Cada foto é um quadrado de 200 pixels recortado em losango, e as fileiras se encaixam desencontradas, com as pontas de uma entrando entre as da outra. Ao passar o mouse sobre uma foto, o recorte se desfaz em um quarto de segundo e a imagem aparece inteira, em quadrado, com saturação reforçada e acima das vizinhas; todas as outras ficam mais escuras e com menos contraste, o que põe o destaque numa pessoa por vez. Ao sair, a foto volta rápido ao losango. O tamanho base vem de uma variável CSS de 100 pixels. ## Você pode estar procurando isto se pediu algo assim - “fotos da equipe em formato de losango que abrem quando passo o mouse” - “galeria diferente para a página sobre nós” - “mosaico de rostos do time com destaque em quem passo o cursor” - “mostrar os profissionais da clínica de um jeito mais criativo” - “grade de fotos em diamante encaixadas umas nas outras” - “fotos que escurecem e só a escolhida fica colorida” ## Também chamado de galeria em losango, diamond photo grid, team gallery, galeria de equipe, hover reveal gallery, mosaico de fotos ## Quando usar - Página sobre nós ou de equipe com poucos retratos, de cinco a dez - Equipe clínica, escritório de advocacia ou agência que quer parecer próxima - Seção de palestrantes ou jurados de um evento - Portfólio curto de fotografia de retrato ## Quando evitar - Listas grandes de pessoas, em que o mosaico fica longo e difícil de percorrer - Fotos com o rosto fora do centro, que o recorte em losango corta - Quando nome e cargo precisam ficar visíveis, já que o componente mostra só as imagens ## Como pedir para a sua IA ```text Crie um mosaico de fotos da equipe recortadas em losango para a página sobre nós: ao passar o mouse ou focar pelo teclado, a foto abre em quadrado e as outras escurecem, com nome e cargo de cada pessoa, texto alternativo real e versão responsiva para celular. ``` 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 Azulejo ### Azulejo funciona no celular? Funciona com ressalvas. Azulejo usa tamanho fixo, cada foto com 200 pixels numa grade de seis colunas, então em telas estreitas vale pedir à IA para reduzir a variável de tamanho. O destaque depende de hover; no toque, o comportamento varia entre navegadores, por isso convém mostrar o nome de cada pessoa também fora do efeito. ### Azulejo é acessível? Em parte. Azulejo já prevê destaque por foco no CSS, com contorno tracejado, mas as fotos não recebem foco sozinhas, e o texto alternativo padrão é genérico, só com o número da imagem. Peça à IA para tornar cada foto focável, escrever o nome da pessoa no texto alternativo e trocar o contorno preto fixo pelas cores do projeto. ### Dá para mostrar nome e cargo em Azulejo? Não por padrão. Azulejo recebe só uma lista de endereços de imagem e mostra as fotos, sem legenda. Para uma página de equipe, peça à IA para acrescentar nome e cargo abaixo do mosaico, num tooltip ou ao lado da foto destacada, com a informação legível também no celular. ## Componentes relacionados - [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. - [Cortiça](https://vibecode.thmtecnologia.com/componentes/cortica/): Fotos de alturas diferentes encaixadas em colunas, com filtros por categoria que reorganizam tudo com animação. - [Escaninho](https://vibecode.thmtecnologia.com/componentes/escaninho/): Seção dividida em blocos de tamanhos diferentes, como uma marmita japonesa, para apresentar recursos ou serviços. - [Biruta](https://vibecode.thmtecnologia.com/componentes/biruta/): Card de foto que mostra um texto por cima no hover e desliza a imagem conforme o lado por onde o cursor entrou. - [Crachá](https://vibecode.thmtecnologia.com/componentes/cracha/): Fileira de fotos redondas sobrepostas; ao passar o mouse, um balão com nome e cargo surge e balança com o cursor. --- 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.