Efeito para gadget de autores do blog

Olá! Hoje vou mostrar como fazer um efeito para colocar em um gadget com os autores do blog, simples e bem legal. Infelizmente não é possível deixar as imagens lado a lado com esse efeito, ele funciona apenas para imagens uma abaixo da outra. A princípio fiz para ser usado para colocar os autores, mas você pode usar como quiser.

Clique aqui para visualizar o efeito

Antes de tudo, você precisa de uma imagem assim:


A imagem é uma só. A metade da imagem que quer aparecendo normalmente deve ficar em cima, e a metade que quer que apareça quando passar o mouse, embaixo.

O que você vai precisar saber para preencher o código a seguir é a metade da altura da imagem toda. Por exemplo, a imagem do tutorial tem 200px de altura, então devo colocar no código 100px.

Cole antes de ]]></b:skin> esse código:

.moderadores {
height: 100px; /* Metade da altura da imagem toda */
overflow: hidden;
}
.moderadores img {
margin-top: -0px;
-webkit-transition-duration: 0.80s; /* Duração do normal para o hover */
}
.moderadores img:hover {
margin-top: -100px; /* Metade da altura da imagem toda*/
}

Agora, num gadget HTML/Javascript cole este código.

<div class="moderadores"><a href="LINK" title="SEU NOME"><img src="URL DA IMAGEM"/></a></div>

É isso, espero que tenham gostado!