Se você está no Google+, já deve ter visto o efeito aplicado nos álbuns, seus ou de seus amigos. Hoje vamos reproduzir esse efeito aqui com o uso de CSS3.
Primeiramente criaremos duas divs gemêas, alterando apenas as fotos, caso você deseje. O corpo de minha página tem o seguinte aspecto:
[code language=”html”]
Como você pode ver, criei dois álbums, cada um com três imagens. No Google, cada álbum é um link para uma nova página. Customize da maneira que achar melhor!
O próxima passo é trabalhar no CSS. As classes album e photo não tem muitos segredos. Para photo img não se esqueça de setar position:absolute, para que as fotos fiquem “umas em cima das outras”, quando não há o efeito hover. O transition-duration: 0.3s define o tempo de transição de efeitos, quando existentes, sobre essas imagens. Se você quiser retira-lo, não tem problema, mas ele deixará a visualização mais suave – faça o teste. A propriedade box-shadow: 1px 1px 2px #666;, como já vimos em tutoriais anteriores, define uma sombra para o box. Customize as outras propriedades como achar melhor!
display: block;
position: relative;
width: 265px;
height: 215px;
float: left;
margin: 50px;
}
.photo img{
width: 240px;
height: 180px;
-webkit-box-shadow: 1px 1px 2px #666;
-moz-box-shadow: 1px 1px 2px #666;
-o-box-shadow: 1px 1px 2px #666;
box-shadow: 1px 1px 2px #666;
background: #F3F3F3;
padding: 4px;
position: absolute;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
[/code]
Agora trabalharemos com o hover sobre a classe album. Esse é a parte que de fato aplicamos o efieot desejado. Para isso utilizaremos a propriedade transform, que é responsável pela transformação do elemento em sim, aliada à rotate, que faz o movimento de rotação, translate, que é responsável pelo reposicionamento do elemento em relação a sua posição atual e scale, que redimensiona o elemento em relação a seu tamanho atual. Confira o resuminho abaixo:
- translate(x,y)
Reposiciona o elemento em relação à sua posição atual. x é utilizado para largura e y para altura. Valores negativos para esquerda em x e para baixo, em y.
- rotate(x)
Provoca uma rotação do elemento em torno do seu eixo original. x é dado em com valores negativos para esquerda e positivos para a direita.
- scale(x,y)
Redimensiona o elemento em relação ao seu tamanho atual. Os valores utilizado para x e y são decimais, e falam sobre o valor em porcentagem do tamanho do elemento. Pode-se usar também a forma scale(x,y), que nesse caso assume x=y.
Assim, cada imagem recebeu um tipo de tratamento diferente, relacionado a sua posição na fila.
[code language=”css”] .album:hover .photo:nth-child(1) img {-webkit-transform: translate(-50px, 0) rotate(-5deg);
-moz-transform: translate(-50px, 0) rotate(-5deg);
-o-transform: translate(-50px, 0) rotate(-5deg);
transform: translate(-50px, 0) rotate(-5deg);
}
.album:hover .photo:nth-child(2) img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.album:hover .photo:nth-child(3) img {
-webkit-transform: translate(50px, 0) rotate(5deg);
-moz-transform: translate(50px, 0) rotate(5deg);
-o-transform: translate(50px, 0) rotate(5deg);
transform: translate(50px, 0) rotate(5deg);
}
[/code]
E o seu álbum está pronto!
Para baixar os arquivos desse tutorial, clique aqui.
Sugestões, dicas e críticas são super bem vindas! E se você ainda não tem convite para o Google+, deixe seu email que envio para você!
// Comente!
comentários