![[Tutorial] Efeito de zoom ao passar o mouse na imagem Empty](https://2img.net/i/empty.gif)
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:
Agora vá no arquivo html e adicione um imagem com a classe img-zoom, como exemplo:
Última edição por Erictemponi em Qua 25 Mar 2015 - 13:06, editado 3 vez(es)
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>Última edição por Erictemponi em Qua 25 Mar 2015 - 13:06, editado 3 vez(es)
Anexos