Zoom CSS

O que é

O zoom é o efeito de vitrine: a pessoa passa o mouse na foto do produto e ela aproxima um pouquinho, convidando ao clique. Com zm-hov isso acontece sozinho, com transição suave. As classes zm-50 a zm-150 deixam o elemento parado numa escala fixa (menor ou maior) — útil para destacar um item ou diminuir um ícone decorativo.

É só CSS. O elemento é ampliado "por cima" dos vizinhos, sem empurrar ninguém nem mexer no resto da página. Para a foto crescer dentro da moldura (sem vazar), a moldura em volta precisa cortar o que sobra: ov-hi no pai.

Quando usar

• Foto de produto, imóvel ou portfólio que aproxima no hover: zm-hov na foto + ov-hi na moldura.
• Card inteiro que cresce um pouco quando o mouse passa: zm-hov no card.
• Destacar um item numa fileira (o plano recomendado um pouco maior): zm-110.
• Diminuir um elemento decorativo sem mudar o tamanho real dele: zm-75 ou zm-50.

Comece aqui

1. 1

   Coloque o SW Core no <head>. As classes de zoom estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Moldura com ov-hi (corta o que sobra) e a foto com zm-hov. Passe o mouse.

   

   <div class="ar-4-3 ov-hi r-m">
     <img src="/morangos.jpg" alt="Morangos frescos" class="zm-hov media-fill">
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Zoom ao passar o mouse

zm-hov aumenta 5% quando o mouse entra e volta suave quando sai. Passe o mouse nos quadros.

Plano Loja

R$ 129/mês

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Vitrine de loja: só a foto aproxima, o texto fica parado Ao vivo

Sapato social

R$ 239,00

Kit viagem

R$ 149,00

Relógio

R$ 389,00

<div sw-card>
  <div class="ar-4-3 ov-hi">
    <img src="/sapato.jpg" alt="Sapato social" class="zm-hov media-fill">
  </div>
  <div class="sw-card-bdy">
    <strong>Sapato social</strong>
    <p class="m-0 t-mut t-p">R$ 239,00</p>
  </div>
</div>

<div sw-card>…Básico…</div>
<div sw-card="pri sha" class="zm-110">
  <div class="sw-card-bdy t-ct">
    <span sw-badge="pri">Mais escolhido</span>
    <p class="m-0 mt-2"><strong>Loja</strong></p>
    <p class="m-0 t-mut">R$ 129/mês</p>
  </div>
</div>
<div sw-card>…Completo…</div>

Galeria de portfólio com zoom em todas as fotos Ao vivo

<div class="l l-4 gap-3">
  <div class="ar-sq ov-hi r-m">
    <img src="/trabalho-1.jpg" alt="Trabalho 1" class="zm-hov media-fill">
  </div>
  <!-- …uma moldura por foto… -->
</div>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• Foto "vazando" da moldura no hover: faltou ov-hi no pai. O zm-hov vai na foto, o corte vai na moldura em volta dela.
• zm-hov junto de uma escala fixa soma: zm-110 zm-hov fica 10% maior parado e cresce mais 5% no hover.
• Escala fixa não muda o espaço ocupado: um zm-150 fica por cima dos vizinhos, e um zm-50 deixa um buraco em volta. Deixe folga (gap) ao redor.
• Foto pequena ampliada fica borrada. Use uma imagem com resolução para o tamanho final.
• No celular não existe "passar o mouse": o zm-hov só aparece no toque, rapidamente. Não coloque informação importante que só aparece no hover.

O que ele não faz

• O zoom no hover é fixo em 5% e 0,3 s. Não há classe para outra intensidade.
• O zoom usa a propriedade scale, separada do transform: funciona junto de abs-mid, pin-mid, do botão sw-btn (que sobe no hover) e das animações, sem um apagar o outro.