Banner propaganda da DevMedia - Cursos de desenvolvimento web

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

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo