Bgames
Olá visitante! Seja bem vindo ao nosso fórum!

Para você ter total acesso ao nosso fórum é preciso que você se cadastre.

Cadastre-se Aqui!


PARA VER LINKS E IMAGENS É PRECISO SE REGISTRAR!

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

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

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

Mensagem por Erictemponi em Sab 21 Mar 2015 - 17:03

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 - 12:06, editado 3 vez(es)

Erictemponi


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


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

Voltar ao Topo Ir em baixo

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

Mensagem por Furious em Seg 23 Mar 2015 - 19:08

Muito bom! Poderia colocar uma imagem como exemplo demonstrativo ?

Furious


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





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

Voltar ao Topo Ir em baixo

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

Mensagem por Erictemponi em Qua 25 Mar 2015 - 12:07

Eu não consegui colocar a imagem aqui no fórum com a propriedades, mas coloquei um link que mostra a imagem.

Erictemponi


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


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

Voltar ao Topo Ir em baixo

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

Mensagem por Conteúdo patrocinado Hoje à(s) 23:59


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


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