# Persiana Fotos lado a lado em faixas verticais; a que está sob o mouse se alarga e as outras se estreitam. > Persiana é um componente do THM Componentes que mostra fotos lado a lado em faixas verticais de cantos arredondados. Ao passar o mouse sobre uma, ela se alarga até ficar três vezes mais larga que as outras, que se estreitam, numa transição de meio segundo. Serve para portfólios, cardápios visuais e fotos de espaços. - 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/persiana/ ## 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 ```text 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. ## Componentes relacionados - [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. - [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. - [Fotograma](https://vibecode.thmtecnologia.com/componentes/fotograma/): Uma foto grande por vez, que sai deslizando e dá lugar à próxima, crescendo a partir do centro. - [Prateleira](https://vibecode.thmtecnologia.com/componentes/prateleira/): Uma fileira de cartões altos com foto que rola para o lado e abre cada cartão num painel por cima da página. - [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.