Compartilhe
Ir em baixo
avatar

Mensagens : 1827
Pontos : 7296
Evolução : 2

Ver perfil do usuáriohttp://www.fury-share.blogspot.com.br/

[Tutorial] Efeito de zoom ao passar o mouse na imagem

em Sab 21 Mar 2015 - 18:03
Reputação da mensagem: 100% (1 votos)
Demo
Tenha em mente que você precisa de um arquivo html com um css já linkado, após ter feito isso, abra o arquivo css e adicione a seguinte classe:

Código:
.img-zoom img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    max-width: 100%;
}
.img-zoom:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

Agora vá no arquivo html e adicione um imagem com a classe img-zoom, como exemplo:

Código:
<div class="img-zoom">
<center><img src="Wrath of the Lich King Logo.png" width="400" height="197" alt="WotLK Logo"/></center>
</div>
Anexos
Efeito Zoom.zip Arquivos prontosVocê não tem permissão para fazer download dos arquivos anexados.(1.3 Mb) Baixado 2 vez(es)


Última edição por Erictemponi em Qua 25 Mar 2015 - 13:06, editado 3 vez(es)
avatar

Mensagens : 1375
Pontos : 8955
Evolução : 3




Ver perfil do usuáriohttp://www.bgames.com.br/

Re: [Tutorial] Efeito de zoom ao passar o mouse na imagem

em Seg 23 Mar 2015 - 20:08
Muito bom! Poderia colocar uma imagem como exemplo demonstrativo ?
avatar

Mensagens : 1827
Pontos : 7296
Evolução : 2

Ver perfil do usuáriohttp://www.fury-share.blogspot.com.br/

Re: [Tutorial] Efeito de zoom ao passar o mouse na imagem

em Qua 25 Mar 2015 - 13:07
Eu não consegui colocar a imagem aqui no fórum com a propriedades, mas coloquei um link que mostra a imagem.
Conteúdo patrocinado

Re: [Tutorial] Efeito de zoom ao passar o mouse na imagem

Voltar ao Topo
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum