Zoom CSS

O que é

Utilitários de escala (transform:scale), tanto de hover suave quanto de valores fixos.

Como funciona

Puro transform: scale() — zm-hov aplica a escala só no estado :hover com transição suave; as classes fixas (zm-50 a zm-150) aplicam o valor direto, sem transição. Como é transform e não width/height, não recalcula layout nem afeta os elementos vizinhos.

Exemplos

Zoom no hover — o uso mais comum Ao vivo

Passe o mouse. O segredo é o overflow:hidden no pai: sem ele, a imagem cresce pra fora e empurra o layout.

<!-- o PAI recorta, a imagem cresce por dentro -->
<div style="overflow:hidden; border-radius:.8rem">
  <img src="/foto.jpg" class="zm-hov" alt="">
</div>

<div class="zm-50">metade</div>
<div class="zm-75">três quartos</div>
<div class="zm-100">tamanho original</div>
<div class="zm-110">10% maior</div>
<div class="zm-125">25% maior</div>
<div class="zm-150">50% maior</div>

Card de vitrine — zoom só na foto Ao vivo

Produto A

R$ 129,00

Produto B

R$ 349,00

Produto C

R$ 89,00

<div class="bg-sur bd r-m" style="overflow:hidden">
  <div style="overflow:hidden">
    <img src="/produto.jpg" class="zm-hov" alt="">
  </div>
  <div class="p-m">Nome do produto</div>
</div>

<!-- o recorte fica na DIV da foto, não no card inteiro:
     assim o texto embaixo não se mexe -->

Atributos

Nenhum.

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

• É transform: scale(): o elemento cresce por cima dos vizinhos, sem empurrar ninguém. Se ele não puder vazar, ponha overflow:hidden no pai.
• Escala grande deixa foto pequena borrada — use uma imagem com resolução suficiente pro tamanho final.