Zoom em imagens com CSS

Publicado em: 26/06/2004

Introdução

Neste tutorial mostro como obter a ampliação de uma imagem ao se passar o mouse sobre ela, com uso de CSS. Ao final da leitura desse tutorial você estará capacitado a projetar um thumbnail de imagem que será ampliado quando o visitante passa o mouse sobre ele.

A técnica CSS empregada

O efeito de zoom da imagem será obtido ao se passar o ponteiro do mouse sobre a imagem. Isto imediatamente nos faz lembrar de uma ação CSS básica, já nossa velha conhecida. Você saberia responder que ação é esta? Responda e confira sua resposta no fim deste tutorial

A ação CSS onde ocorre uma mudança com o mouse em cima, é típica do comportamento de links, com a pseudo classe a:hover

Assim, podemos estabelecer a estratégia para fazer funcionar o zoom.

  1. a imagem menor (thumbnail) será como um link no estado em repouso, estado "UP";
  2. a imagem ampliada (zoom) será como o link no estado com o mouse em cima, estado "OVER"

Veja aqui o zoom em ação

Preparando a imagem

Para o zoom precisamos de duas imagens.

A imagem menor e a imagem ampliada.

Mas, com o uso das CSS as duas imagens serão montadas em uma só e o funcionamento você verá adiante.

Agora observe abaixo a imagem que usaremos:

A imagem duas flores usada no tutorial

O thumbnail tem dimensões de 120px x 90px;

A imagem ampliada tem dimensões de 400px x 300px.

E, repito: Não são duas imagens!

Trata-se de imagem única construída uma em cima da outra.

O funcionamento do zoom

Para fazer funcionar o zoom, vamos estabelecer regras CSS capazes de:

  • no estado "UP" do link, mostrar como background (fundo) o thumbnail. O canto superior esquerdo da imagem no canto superior esquerdo de uma div com dimensões iguais a 120px x 90px;
  • no estado "OVER" do link, mostrar como background (fundo) a mesma imagem mas agora deslocando o canto superior esquerdo 90px (altura do thumbnail) para cima em uma div com dimensões iguais a 400px x 300px.

O código HTML

Observe a seguir o código HTML para o zoom:

........
<body>
<div id="zum">
<p id="thumb">
<a href="#"></a>
</p>
</div>
</body>
</html>

Entendendo o código:

  • um link "morto" e sem texto para aplicar os estados de links no zoom;
  • um parágrafo (elemento nível de bloco) contendo o link e identificado com a id que eu nomeei "thumb";
  • uma div contendo o parágrafo identificada com a id que eu nomeei "zum"

As regras CSS

Tendo entendido a teoria da solução do problema vamos estabelecer as regras CSS.

body {margin:20px;} /* Esta regra destina-se 
tão somente a colocar as imagens a uma distância 
de 20px para a esquerda e para baixo na tela do monitor e 
não influi no zoom */

#zum {
width: 120px; /* largura da div = largura thumbnail */ 
height: 90px; /* altura da div = altura thumbnail */ 
background: url(flor.jpg) 0 0 no-repeat; /* coloca a imagem 
dentro da div na posição 0 0 e 
sem repetição */ 
margin: 0;
padding: 0;
} 

#thumb a { /* estado "UP" do link */ 
height: 90px; /* altura do thumbnail */ 
display: block; /* converte <a> de inline para 
block permitindo exibição com a largura 
e altura determinadas */ 
}

#thumb a:hover { /* estado "OVER" do link */ 
width: 400px; /* largura da imagem */ 
height: 300px; /* altura da imagem */ 
background: transparent url(flor.jpg) 0 -90px no-repeat; 
/* fundo da div notar que as coordenadas 0 -90px 
obrigam a imagem de fundo a "subir" 90 px */ 
}

Observando atentamente as regras CSS acima e com as dimensões do thumbnail e da imagem ampliada em mente, você entenderá o funcionamento do zoom.

Fiz esta pergunta no começo do tutorial.

Aqui a resposta:

A ação CSS onde ocorre uma mudança com o mouse em cima, é típica do comportamento de links, com a pseudo classe a:hover