Efeito divergente

Okaerinasai!

Após me dedicar a ver animes, finalmente decidi que se ontem postei imenso, hoje não poderia simplesmente deixar o blog no vazio. Daí estar agora mesmo a postar outro tutorial exclusivo, embora nada de mais, que nomeei assim precisamente por ter começado a ler Divergente. No efeito, duas sombras claras que estavam por trás da imagem começam a afastar-se, a divergir, enquanto este muda de cor, então o nome não me saía da cabeça. Bem, cá está:

Prévia: www

Tutorial:

Procure por:

/b:skin

Acima cole:

.diverge {
box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
border-radius: 2px;
opacity: 0.60;
-webkit-filter: sepia(0.3) hue-rotate(1000deg) saturate(5);
-webkit-transition-duration: 9s;
}
.diverge:hover {
box-shadow: -8px -8px 0px #ffffff, 8px 8px 0px #ffffff;
opacity: 1.0;
-webkit-filter: sepia(0.4) hue-rotate(350deg) saturate(1);
-webkit-transition-duration: 3s;
}

Pode alterar, por exemplo, a cor da sombra, ou mesmo tirar os cantos arredondados, embora eu pense que faz parte do charme. Para aplicar, é só usar a tática normal e adicionar o código serguinte num gadget, substituindo a url da imagem e, se você quiser, transformar em link.

<img src="URLDAIMAGEM" class="diverge" />

Já está, é bem simples.