Efeito push

Ohayou ^^

Este efeito na verdade não é assim tão simples e conhecido, mas eu adoro-o. Tirei do Kawaii World, a diferença está apenas na organização, e ter mudado as imagens - porque eu sinto um carinho especial em deixar tudo "à minha maneira". Mas enfim, os créditos estão aí, mas se reblogarem ou pegarem o tuto do meu blog, então por favor creditem-me a mim, tá? O efeito consiste em imagens que se deslocam, basicamente. Entenderão melhor pela prévia.

Prévia (www):

Tutorial:

Procure por:

/b:skin

Acima adicione:

.puxa1 {
background-image: URL(IMAGEM);
width: 100px;
height: 100px;
display: inline-block;
-webkit-transition: All 0.6s ease-in-out;
-moz-transition: All 0.6s ease-in-out;
-o-transition: All 0.6s ease-in-out;
margin-right: 1px;
}
.puxa1:hover {
background-position: -220px 0;
-webkit-transition: All 0.9s ease-in-out;
-moz-transition: All 0.9s ease-in-out;
-o-transition: All 0.9s ease-in-out;
}
.puxa2 {
background-image: URL(IMAGEM);
width: 100px;
height: 100px;
display: inline-block;
-webkit-transition: All 0.6s ease-in-out;
-moz-transition: All 0.6s ease-in-out;
-o-transition: All 0.6s ease-in-out;
margin-right: 1px;
}
.puxa2:hover {
background-position: -100px 0;
-webkit-transition: All 0.9s ease-in-out;
-moz-transition: All 0.9s ease-in-out;
-o-transition: All 0.9s ease-in-out;
}
.puxa3 {
background-image: URL(IMAGEM);
width: 100px;
height: 100px;
display: inline-block;
-webkit-transition: All 0.6s ease-in-out;
-moz-transition: All 0.6s ease-in-out;
-o-transition: All 0.6s ease-in-out;
margin-right: 1px;
}
.puxa3:hover {
background-position: 0 -100px;
-webkit-transition: All 0.9s ease-in-out;
-moz-transition: All 0.9s ease-in-out;
-o-transition: All 0.9s ease-in-out;
}
.puxa4 {
background-image: URL(IMAGEM);
width: 100px;
height: 100px;
display: inline-block;
-webkit-transition: All 0.6s ease-in-out;
-moz-transition: All 0.6s ease-in-out;
-o-transition: All 0.6s ease-in-out;
margin-right: 1px;
}
.puxa4:hover {
background-position: 0 -330px;
-webkit-transition: All 0.9s ease-in-out;
-moz-transition: All 0.9s ease-in-out;
-o-transition: All 0.9s ease-in-out;
}

Cuidado quando for substituir o sublinhado» O puxa2 e puxa3 irão ficar diferentes em hover, para isso, você terá de criar uma imagem com o dobro das dimensões que estipular no html. No puxa 2, a imagem diferente deve ficar ao lado, e no puxa3, deve ficar em baixo. Certifique-se de que estão exatamente a metade, tal como mostram as minhas imagens: www | www

Adicione um gadget HTML/Javascript e cole o código seguinte:

<a href="LINK"><div class="puxa1"></div></a>
<a href="LINK"><div class="puxa2"></div></a>
<a href="LINK"><div class="puxa3"></div></a>
<a href="LINK"><div class="puxa4"></div></a>

Faça as alterações que quiser, mas por favor não "brinque" demasiado com este código, nada de apagar linhas ou colocar imagens que não cumpram as condições que pedi. Ah, eu coloquei o código do 4 tipos de "puxas" para vocês adicionarem num gadget, mas podem usar sempre o mesmo, basta trocar o número. Se quiserem alinhadinho na vertical, tratem de fazer isso vocês, terão de mover as imagens. Nada que procurar uns códigos por aí não resolva, eu própria já ensinei a posicionar imagens no blog, procurem no mapa onde diz "básicos". 

Jaa!