Zoom em imagem com CSS puro (fácil e rápido)

Neste artigo veremos como fazer um zoom em imagem com CSS, sem utilizar JavaScript ou alguma lib, vamos de uma forma fácil atingir o objetivo com CSS puro.

A ideia central da técnica é adicionar uma div externa que vai englobar a imagem, e ao ser passado o ponteiro do mouse por cima (hover) ativar o zoom

Então acaba que o HTML deste projeto é bem simples, apenas uma div com uma tag img

E a técnica do zoom é realizada pela propriedade scale do CSS

Além disso, um uso muito comum é nas telas de produto de e-commerce, onde o cliente precisa ver mais detalhes do produto e aí aplica-se o zoom

Zoom com CSS: código HTML

Como mencionei acima o código HTML é bem simples, veja:

<div class="container">
    <img src="garrafa_zoom.jpg">
</div>

Neste caso, temos uma div com class container que vai abrigar a imagem

E também a própria imagem dentro dessa div, que eu chamei de garrafa_zoom.jpg e está na mesma pasta do HTML

Agora vamos ao código CSS

Zoom com CSS: código CSS

Vamos definir um tamanho para o container, adicionar uma margem para descolar das bordas do navegador e também uma borda, para marcar o fim da div

Na imagem vamos definir que a sua largura é 100% do pai, ou seja, a imagem ficará do tamanho do container

Além disso vamos adicionar uma transição para o zoom não ficar tão repentino

E por fim vamos adicionar o pseudo-seletor :hover, para quando o ponteiro do mouse é colocado em cima da imagem ativar o scale

Este scale vai aumentar a imagem, baseado no valor da regra

Veja o código final do CSS:

.container {
  position: relative;
  border: 1px solid #000;
  overflow: hidden;
  width: 400px;
  margin: 100px;
}
.container img {
  max-width: 100%;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.container:hover img {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

Perceba também que adicionamos -moz- e -webkit-, isso serve para utilizar as funcionalidades nativas dos navegadores para a regra do scale, por exemplo

O -moz- faz essa função para o navegador Firefox e o -webkit- para o Safari e Opera

Então as vezes algumas regras não estão padronizadas ainda nos navegadores, mas sim as funções nativas, então com este recurso você resolve este problema

Dadas as explicações, vamos ver o resultado final