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
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.
