CSS3 – Criando efeito em álbuns estilo Google+

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”]
[/code]

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!

[code language=”css”] .album{
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

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

3 Comentários

  • Responder novembro 17, 2011

    Xantara

    Woah nelly, how about them aeppls!

  • Responder outubro 21, 2012

    allyssonh

    perfect! thaks for this post.

  • Responder dezembro 18, 2012

    Douglas Mendes

    No Explorer ele não funciona que pena mais e muito bonito o efeito

// Siga as boas práticas: Comente!