Tutorial- Efeito Squeet

Trouxe para vocês mais um efeito para afiliados  ou se preferir aplicar em 

outro lugar fica a seu critério, peguei este efeito em um tumblr  I-LOVETHINGS.

Para ver o efeito x

Para colocar em seu blog, coloque o código abaixo, antes da tag ]]></b:skin>

/***** EFEITO ESQUET - POR I-LOVETHINGS/LOVERS-OF-DESIGNS/SPAZIOHTML *****/

.imagem {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}

.imagem:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}

.imagem2 {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}

.imagem2:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}

.imagem3 {background: url('LINK-DA-IMAGEM'); -webkit-transition-duration: 1.0s; width: 116px; height: 136px;display: inline-block;}

.imagem3:hover {background: url('LINK-DA-MESMA-IMAGEM-ESCRITA'); -webkit-transition-duration: 1.0s;}

Depois das alterações feitas salve, e vá em layout adicione um gadget de Html/Java Script e cole:

<div class="imagem1"></div>

<div class="imagem2"></div>

<div class="imagem3"></div>

Esse efeito as imagens são colocadas pelo html, também tem que configurar o tamanho, você vai fazer uma imagem normal, depois fazer a mesma imagem em preto e branco. Em width: 116px; height: 136px vc irá por o tamanho da sua imagem. Width - largura, Height - altura.

Kissus