Efeito revelar

Okaeri :)

Este menu/efeito foi só em parte inventado por mim, porque é uma adaptação do efeito lava-up - que ensinarei em breve. Só que, em vez de passar da primeira metade da imagem para a segunda, revela a segunda metade sem destituir a primeira. Esclareço na prévia >.<

Prévia (o fundo não vem incluído):

Visualize melhor: www

Tutorial:

Procure por:

/b:skin

Acima cole:

.revela2 {
margin-top: 0px;
margin-left: 0px;
}
.revela {
display: inline-block;
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
}
.revela img {
position: absolute;
padding-top: 0px;
-webkit-transition-duration: .60s;
}
.revela:hover {
height: 200px;
position: absolute;
-webkit-transition-duration: .60s;
}

Altere, dentro das chavetas que dizem "revela", a largura pela largura das suas imagens, e a altura por metade da altura das mesmas. Em "revela:hover", é que coloca a altura total da imagem. Não precisa mudar mais nada.

Abra um gadget HTML/Javascript e cole lá dentro.

<div class="revela2">
<div style="margin-left: 100px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; position: absolute;">
<div class="revela">
<a href="LINK" title="NOME"><img src="URL-DA-IMG" /></a></div></div>
<div style="margin-left: 250px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; position: absolute;">
<div class="revela">
<a href="LINK" title="NOME"><img src="URL-DA-IMG" /></a></div></div>
<div style="margin-left: 400px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; position: absolute;">
<div class="revela">
<a href="LINK" title="NOME"><img src="URL-DA-IMG" /></a></div></div>
</div>
</div>

Ok, parece extenso e confuso, mas não é tanto assim. Primeiro, substitua os links e o nome de uma vez - fica logo assunto arrumado. Depois, é preciso criar as suas imagens, eu criei com texto na segunda metade. E coloca a URL. Quanto às linhas em que diz div style, servem para ajustar o lugar das imagens, de maneira a que fiquem uma ao lado da outra. Provavelmente só precisará de mexer na margin-left, mas coloquei as outras linhas pelo sim pelo não.