Efeito Crossed

UP: Vocês querem que eu ponha o lay de Natal amanhã ou Quinta-feira?

Bom dia gente!

Desculpem-me por não ter postado ontem e ante-ontem, eu estava fazendo 2 efeitos para postar para vocês *-* Eu ia postar os dois hoje, nesse mesmo post, mas achei melhor deixar um para cada dia, assim amanhã posto o outro (surpresa haha)

Bom, ainda não estou muito boa com essa coisa de criar efeitos, tenho que treinar mais, demoro muito para fazer um. Fiquei a tarde toda tentando fazer essa coisinha. Na verdade foi apenas 1 hora, mas surgiu um problema que quando passava o mouse na imagem as outras estavam subindo, daí fiquei a tarde toda só tentando resolver isso. Mas enfim, consegui e aqui está o efeito! Acho que fica legal usá-lo para autores ou algo do tipo ♥ Enfim, veja a preview e o tutorial!

Preview

Bom, o fundo branco de quando você passa o mouse onde está escrito algo aqui chamaremos de 1º fundo na explicação e o fundo preto/cinza onde está escrito algo mais aqui chamaremos de 2º fundo. Clique em leia mais e veja o tutorial.

Vá no seu HTML e procure por ]]></b:skin>  e acima da tag cole:

.crossed{
 position: relative;
display: inline-block;
align: center;
width: 110px; /*largura*/
height: 110px; /*altura*/
text-align: center;
overflow: hidden;
border: 3px solid #cbafa5; /*cor da borda, senão quiser, tire isso*/
}
.crossed img {
z-index:1px;
background: #fff;
width: 110px;/*largura*/
height: 110px;/*altura*/
align: center;
}
.crossed .description{
position: absolute;
z-index:2px;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top:0px;
margin-left:0px;
background: #fff; /*cor do 1º fundo, a parte branca da preview onde está escrito algo aqui*/
color: #000; /* cor do texto do fundo branco*/
text-shadow: 1px 1px 1px #303857;
opacity: 0.0;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
}
.crossed:hover .description  {
opacity: 0.75;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top: -114px;
margin-left:0px;
}
.crossed .bla{
z-index:3px;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top:-140px;
margin-left:0px;
background: #ABA4A1; /*cor do 2º fundo, a parte cinza da preview onde está escrito algo mais aqui*/
color: #000;/* cor do texto do fundo cinza*/
text-shadow: 1px 1px 1px #303857;
opacity: 1.0;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
}
.crossed:hover .bla  {
position:relative;
transform: ease-out;
opacity: 1.0;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top: 38px;
}

Bom, está tudo explicado entre /* e */ . Só tem um detalhe: Quando você for mudar o tamanho, tem que mudar TODOS os width e TODOS os heigth. E tirar esse mesmo valor dos dois margin-top que eu deixei em negrito. Por exemplo, você mudou os width e os heigth de 110 para 150, ou seja, acrescentou 40 px. Você terá de acrescentar 40px nos 2 margin-top negritados, ou seja, ficará  margin-top: -154px e margin-top: 78px. Qualquer dúvida é só falar que eu lhe ajudo

Depois adicione um gadget de HTML/Javascript e cole:

<div class="crossed"><img src="http://1.bp.blogspot.com/-SHPxd2v6NBk/UMZZyZ3l7VI/AAAAAAAAEyg/j79aKkJgcqQ/s1600/zzzzzzzzzzzzz.png" /><div class="description"><br/>Algo aqui<div class="bla"> Algo mais aqui</div></div></div>

O que eu deixei em negrito é o link da imagem, e os sublinhados é o que ficará escrito. 

Espero que tenham gostado! Beijos