Fabrik form
Zoom em imagens 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?
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.
- a imagem menor (thumbnail) será como um link no estado em repouso, estado "UP";
- a imagem ampliada (zoom) será como o link no estado com o mouse em cima, estado "OVER"
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
divcom 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"></span></span></code></span></span><code></code></pre>
<pre><span style="font-size: 12px;"><span style="font-family: trebuchet ms,helvetica,sans-serif;"><p id="thumb"></span></span></code></span></span><code></code></pre>
<pre><span style="font-size: 12px;"><span style="font-family: trebuchet ms,helvetica,sans-serif;"><a href="#"></a></span></span></code></span></span><code></code></pre>
<pre><span style="font-size: 12px;"><span style="font-family: trebuchet ms,helvetica,sans-serif;"></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"; -
umadivcontendo o parágrafo identificada com aidque eu nomeei "zum"
As regras CSS
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