Zoom na imagem com css

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:

imagem retirada do site maujor.com

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:

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.

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.

Fonte: maujor.com