Como ele é
Lembra uma fileira de cartazes estreitos lado a lado, como as lâminas de uma persiana vertical. As imagens ficam numa faixa de 384 pixels de altura, separadas por 8 pixels, todas com a mesma largura e cantos arredondados, e cada uma mostra só uma fatia recortada da foto. Quando o mouse para sobre uma delas, ela se alarga até ocupar três vezes o espaço das outras, que se estreitam, e revela mais da imagem. A mudança leva meio segundo, com aceleração e freada suaves. Ao tirar o mouse, todas voltam à mesma largura. O componente não tem cor própria: o visual vem das suas fotos.
Você pode estar procurando isto se pediu algo assim
- fotos lado a lado que aumentam quando passo o mouse
- galeria em faixas verticais que abre a imagem escolhida
- mostrar os ambientes da clínica de um jeito mais bonito
- cardápio com fotos dos pratos que se expandem
- aquela galeria de faixas que se alarga no hover, tipo acordeão
- portfólio com várias fotos numa linha só
- galeria horizontal que destaca a foto sob o cursor
Também chamado de
- galeria expansível
- galeria sanfona
- galeria acordeão
- accordion gallery
- image accordion
- hover expand gallery
- galeria em faixas
Quando usar
- Portfólio de fotografia, arquitetura ou design com poucas imagens fortes
- Cardápio visual de restaurante, café ou confeitaria
- Apresentação de ambientes de clínica, hotel, coworking ou loja
- Seção de destaques de um evento ou de um lançamento
Quando evitar
- Galerias com muitas fotos, em que cada faixa fica estreita demais para entender a imagem
- Públicos que acessam pelo celular, já que o efeito depende de hover e a faixa tem altura fixa
Como pedir para a sua IA
Crie uma galeria expansível com as fotos do portfólio em faixas verticais: a foto sob o mouse se alarga e as outras se estreitam com transição suave. Inclua texto alternativo de verdade em cada imagem, abertura também por foco e toque, layout empilhado no celular e versão sem animação 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 Persiana
Persiana funciona no celular?
Funciona, mas perde o principal. Persiana alarga a foto com o hover do CSS, que em telas de toque nem sempre dispara, e mantém as faixas lado a lado numa altura fixa de 384 pixels. Para o celular, peça à IA para expandir a foto ao toque ou para empilhar as imagens em telas estreitas.
Quantas fotos cabem em Persiana?
Não há limite em Persiana: cada foto vira uma faixa de largura igual, e a escolhida ocupa três partes do espaço contra uma de cada outra. Com muitas imagens, as faixas ficam estreitas demais; a demonstração usa quatro, e vale testar a largura das faixas no tamanho de tela do seu público.
Persiana é acessível?
Só em parte. Em Persiana, o texto alternativo de cada imagem é o próprio endereço do arquivo, e as faixas não recebem foco, então quem usa teclado não consegue expandir nenhuma. Peça à IA para receber um texto alternativo por foto e para expandir também no foco, com tabindex e focus-visible.
