Zoom em imagem
Que tal você fazer um zoom com css como este aqui?
Então, siga as instruções abaixo e bom estudo! 
Armando o documento:
Depois de ter escrito toda a estrutura do documento (<html><head>…) coloque no corpo do documento apenas um link e defina um ID para este link, neste caso, definimos como “foto”, veja abaixo:
<a href=”#” id=”foto”>Ver a foto ampliada</a>
Fazendo a imagem:
Muitos podem não entender este passo, ele é muito importante, portante, preste o máximo de atenção.
Neste zoom, não vamos mudar a dimensão de uma imagem pequena, ou seja, não vamos aumentar literalmente a imagem, nós apenas vamos fazer uma pequena troca. Por isso, você deverá ter a imagem que você quer dar zoom em tamanho grande. Escolha uma imagem, e use um editor de imagem da sua preferência para diminuir a foto, e monte desta forma, a foto menor em cima da maior.
A menor é a que vai ser mostrada no documento, quando o usuário faz o zoom (que vai ser feito ao passar o mouse na foto menor) ele verá a foto grande.
Detalhe: As duas fotos (grande e pequena) devem estar juntas em uma única imagem, assim, isso é essencial para o truque dar certo.
Começando a escrever o css
No css, vamos começar a formatar o link!
Vamos começar definindo que ele deverá flutuar a esquerda (float:left;) está acompanhando?
a#foto {
float:left;
}
Fazendo o texto do link sumir
Se você colocou algum texto dentro do link, vamos fazer ele desaparecer agora, defina que a identação de texto deste link será de 1000em (text-ident:-1000em;), pronto! Mas agora, temos um problema com o nosso amigo IE, na versão em que testei (Ie 5.0) o texto sumiu. Mas se resolveu quando eu defini que o link deveria ser mostrado como um bloco (display:block;). Para ficar melhor de visualizar, defina uma borda de 1px com a cor preta (border:1px solid black;). Ainda está acompanhando, veja como o css está.
a#foto {
float:left;
text-indent: -1000em;
display: block;
border:1px solid black;
}
Definindo a dimensão
Lembra das imagens?! Então, defina o tamanho do link com as mesmas proporções que a foto pequena, neste exemplo, a foto pequena tem a largura de 150px (width:150px;) e a altura de 150px (height:150px;).
a#foto {
float:left;
text-indent: -1000em;
display: block
width: 150px;
height: 150px;
}
Você deve estar visualizando um quadrado com uma borda preta, não é? O próximo passo vai dizer o segredo!
O começo do truque
Lembra da imagem que a gente fez? Aquela que tem a foto pequena e a foto grande? Então, você vai definir agora como sendo o background do link, este background não pode se repetir (background:url(“img.jpg”) no-repeat;
a#foto {
float:left;
text-indent: -1000em;
display: block
width: 150px;
height: 150px;
border:1px solid black;
background: url(“img.jpg”) no-repeat;
}
O fim do truque
A foto deve aumentar quando o usuário passar o mouse sobre (a#foto:hover) ela, ou seja.
Defina que o link deverá ficar com as mesmas dimensões que a foto grande, neste exemplo, a foto tem a largura de 300px (width:300px;) e a altura de 300px (height:300px;), veja como ficou.
a#foto:hover {
width: 300px;
height: 300px;
}
Calma, calma! Vamos finalizar o truque.
Para ficar tudo nos conformes, temos que fazer a foto grande ficar na altura certa, isso é fácil! Apenas defina que ao passar o mouse no link, a altura do background seja negativa. Neste exemplo, bastou colocar o valor de -156px que a foto ficou no lugar certo. Você deverá ir testando até achar o valor em que a foto fique alinhada ao topo.
a#foto:hover {
width: 300px;
height: 300px;
background-position: 0 -156px;
}
10 Comentários
DGmike 07/12/2007 às 00:24
Engraçado puxar este post, pois minha esposa (Alice) que está engatinhando no css (quem dera ter uma visie aqui no Rio) presisou fazer um zoom e eu tive que recorrer os artigos antigos do tableless e achei (antes do novo layout).
Ah sim, eu estava procurando meu primeiro comentário no tableless para ver quando foi.
Daniel Xani 12/12/2007 às 09:37
Mto bom esse artigo.
Tem mta gente que sofre por ae pra fazer um zoom desse, eu lembro de qdo fiz um site, tinha uma galeria de fotos, a galera era daquela q tem um menu a esquerda com a miniatura e qdo a:hover nelas, aparecia o zoom na direita. Foram tds exemplos e pqnos tutoriais q aprendi aqui.
Parabens
[]s
Marcelo 15/12/2007 às 23:53
Que sensação de Déjà vu mais estranha. Tenho a impressão que já vi esse post aqui mesmo no tableless a algum tempo atrás. Aliás, nos últimos dias tenho me deparado com muitos posts do tableless que tenho a leve impressão de já terem sido publicados.
Será loucura?
De qualquer forma, ótimo post
Edilson 16/12/2007 às 15:18
Olá, pessoal! Sempre acompanho os artigos do Tableless, mas é a primeira vez que faço um comentário.
Gosto desses truques em CSS, porque exploram ao máximo o que a linguagem pode fazer. Sepre procuro tirar o máximo de proveito do CSS antes de recorrer ao JS. Vejo muito site por aí que usa JS para truques que podem ser feitos com CSS. Acho um desperdiço de programação. É por isso que gosto muito de posts como esse.
Parabéns!
Breno 16/12/2007 às 15:33
Que gambiarra… Imagem não é link, né?
Sergio Leal 17/12/2007 às 08:54
Beleza Diego!
Estava precisando desse “truque” aí.
Aproveitando, Parabéns pelo novo layout, ficou “Show”. Gostei principalmente da parte aí de baixo, (outros artigos, aprenda, histórico).
Rodrigo Fante 09/02/2008 às 15:37
Legal é, mas é semantico?
Webduzidos » Blog Archive » Aprenda mais sobre Tableless 21/05/2008 às 09:21
[...] do site Tableless e me deparei com várias coisas legais para se fazer como, por exemplo, dar um zoom em uma imagem usando apenas CSS. Além deste ainda tem vários outros, inclusive dicas de cursos online e presenciais para se [...]
thiago 31/05/2008 às 11:24
Muito bom esse post.
justamente o que procurava! =)
Vlw!!!!!!!!
daniel 28/12/2008 às 15:20
ta tudo blz,
para quem sabe !! Pois esta muito mal explicado para quem quer aprender este truque precisa de um passo a passo com melhores explicaçoes tentei aqui e nao consegui e nao diga que nao estudei pois ja li 2 apostilas de CSS
tchau e espero mudanças