| Post: Aumentar imagem ao passar o mouse, com Css |

Imitar 'Efeito Zoom' na imagem ao passar o mouse, com Css

Efeito 'Zoom' imagem ao passar o mouse, com Css

Os códigos aqui são para pessoas que já entendem Css e Html.

Quem quiser ver outros detalhes, veja o post original, clique aqui

Esses códigos e exemplos podem não ser práticos, nunca vi muita utilidade para eles, caberá a cada um ver se isso é útil ou um Script pode ser mais fácil para um uso frequente, pelo menos mostra as possibilidades do Css.

O código funciona para imitar um efeito zoom, na verdade ele não faz isso, ele apenas faz com que uma imagem apareça no lugar da outra, sendo assim, se a imagem for a mesma ou parecida, as pessoas vão pensar que a imagem aumentou quando passaram o mouse sobre ela.
O efeito funciona bem, porém, no Internet Explorer o link não funciona para algumas versões de Html, não sei qual delas, mas quando o código foi testado em uma página de Html comum ele não abria o link, aí, acrescentei essa linha no topo do Html e funcionou. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Essa página é também para mostrar novos exemplos e mostrar que o código funciona mesmo estando o Css em arquivo externo.

Com apenas algumas alterações na parte Html e disposição de suas tags é possível fazer novos efeitos, porém, fiz uma pequena alteração na parte do Css, isso para que a cor de fundo azul(blue) fique apenas nas imagens, dessa forma é possível colocar uma frase sobre a imagem, essa frase com fundo transparente, o que será mostrado no ultimo exemplo.

Código para Css

Espero que você saiba qual a parte desse código é o estilo e qual são as tags Html:

<head><style type='text/css'>

.aumentaIMG a span{display:none;}

.aumentaIMG a:hover span{background:transparent; display:block; position:absolute; z-index:100;}

.aumentaIMG a:hover span img{background:blue;}

.aumentaIMG a:hover em{z-index:1; display:none;}

.aumentaIMG a img{border:#000 1px solid;}

.aumentaIMG a:hover img{border:#000 1px solid;}

</style></head>

Códigos e tags Html

Abaixo você verá alguns exemplos de diferentes códigos Html que irão 'interagir' com o estilo Css acima e terão diferentes efeito, com um pouco mais de estilo ou apenas mudando o local das tags. Observe atentamente as diferenças entre um e outro.

Nos códigos abaixo, deixei em azul onde vai os endereços de imagem e você também pode substituir o caracter # por endereço de página para link.

Se você notar uma diferença na cor de uma mesma imagem, é porque é uma imagem com partes semi-transparente e a cor de fundo dela muda ao passar o mouse fazendo com que essas partes se destaquem.

Exemplo 1

Uma imagem pequena que poderia ser 'aumentada', mas, por achar interessante esse exemplo, resolvi fazer um efeito mudar imagem ao passar o mouse, com o uso das tags <em> para esconder uma das imagens. Além disso a imagem que aparece é aumentada.

Nesse código abaixo e exemplo, a imagem que está entre as tags <em> some e a outra aparece, assim, o texto sobe, isso parece ruim, nos exemplos abaixo existe uma correção para esse efeito.

<div class="aumentaIMG">

<a href="#">

<em>

<img alt="descreva AQUI sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" height="70" width="78" />

</em>

<span>

<img alt="descreva AQUI sobre sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" height="399" width="580" />
</span>

</a>

</div>

Exemplo 2

Nesse exemplo a imagem grande aparecerá mas a outra não desaparece, a imagem maior pode ficar abaixo ou ao lado, isso dependerá do estilo Css aplicado a elas, se você adicionar style='float:left' na primeira imagem, a segunda ficará do lado dela, outra opção seria style='float:right'

exemplo 2, imagem grande que foi dimensionada em porcentagem para um tamanho normal

<div class="aumentaIMG">

<a href="#">

<img alt="descreva AQUI sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" height="99" width="145" />

<span>

<img alt="descreva AQUI sobre sua imagem" src="http://NOMEsite.com/ENDERECO_DA_IMAGEM.XXX" height="399" width="580" />
</span>

</a>

</div>

Mais efeitos com mesmo código Css

Com apenas algumas alterações na parte Html e disposição de suas tags é possível mudar o efeito

Exemplo 3

No exemplo abaixo tem uma pequena diferença do primeiro exemplo acima, nesse código a primeira imagem se sobrepõe a outra imagem, e ao texto, e não faz com que uma das imagens suma, assim, o texto e outros elementos não se mexem.

divulgar blog ou site e aumentar visitas grátis

<div class="aumentaIMG">

<a href="#">

<span>

<img alt="exemplo 3" src="http://4.bp.blogspot.com/-PA_B4m6Iikw/TXVfNcdXL0I/AAAAAAAAFTw/yEnEmuuRvN4/s1600/divulgar%2B%2Bblog%2Be%2Bsite%2Bna%2Bweb-seo2.png" height="399" width="580" />

</span>

<img alt="descreva AQUI sobre sua imagem" src="http://4.bp.blogspot.com/-PA_B4m6Iikw/TXVfNcdXL0I/AAAAAAAAFTw/yEnEmuuRvN4/s1600/divulgar%2B%2Bblog%2Be%2Bsite%2Bna%2Bweb-seo2.png" height="99" width="145" />

</a>

</div>

Exemplo 4

Nesse exemplo a imagem se mantém e aparece outra sobre ela, no código abaixo você pode ver que a imagem que aparece encima é a primeira, e, ela tem um estilo incluso nela, para o fundo ser transparente, já que ela também é, e as margens para ela ficar quase centralizada, margin:99px 0 0 122px; isso é possível regular.

<div class="aumentaIMG">

<a href="#">

<span>

<img style='background:transparent;border:0;margin:99px 0 0 122px;' alt="descreva AQUI sua imagem" src="http://4.bp.blogspot.com/-PA_B4m6Iikw/TXVfNcdXL0I/AAAAAAAAFTw/yEnEmuuRvN4/s1600/divulgar%2B%2Bblog%2Be%2Bsite%2Bna%2Bweb-seo2.png" height="99" width="145" />

</span>

<img alt="descreva AQUI sobre sua imagem" src="http://4.bp.blogspot.com/-PA_B4m6Iikw/TXVfNcdXL0I/AAAAAAAAFTw/yEnEmuuRvN4/s1600/divulgar%2B%2Bblog%2Be%2Bsite%2Bna%2Bweb-seo2.png" height="399" width="580" />

</a>

</div>

Exemplo 5

Nesse exemplo usei uma frase no lugar de uma imagem, como ode ser visto ela fica sobre a imagem, e, se você entende de Html e Css pode personalizar a mesma.

Outro efeito parecido onde passa o mouse sobre imagem e aparece descrição, clique

Clique para Ir

<div class="aumentaIMG">

<a href="#">

<span>Clique para Ir

</span>

<img alt="descreva AQUI sua imagem" src="http://4.bp.blogspot.com/-PA_B4m6Iikw/TXVfNcdXL0I/AAAAAAAAFTw/yEnEmuuRvN4/s1600/divulgar%2B%2Bblog%2Be%2Bsite%2Bna%2Bweb-seo2.png" height="99" width="145" />

</a>

</div>