Objetivo

Mostrar como obter a ampliação de uma imagem ao se passar o mouse sobre ela, com uso de CSS. Ao final da leitura desse artigo, 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:

Desta forma, 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:

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.

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 computador 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 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.

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?

Fiz esta pergunta no começo do artigo. Browsers sem suporte para JavaScript não conseguem visualizar a resposta onde foi colocada.

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

Descubra a versatilidade das CSS
Projete conforme as Web Standards.

Um abraço e até a próxima.