Efeito Backy

Olá hoje irei ensinar um efeito bem bacana com CSS chamado Backy, seque abaixo uma demostração dele funcionando.

Demonstração

Primeiro, vá em Modelo > Editar HTML > Prosseguir > Ctrl + F ou F3 e procure por 

]]></b:skin>

apos encontra-lo acima dele cole o seguinte código:
imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #A0514C;float: left;} nome2 {position: absolute; display: block; width: 300px; height: 30px; top: 30px; margin-left: -20px; opacity: 0; text-align: center; color: #A0514C; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #A0514C; border-bottom: 3px solid #A0514C; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 15px; font-family: 'play'} imagem2:hover nome2 { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg)}
 Bem, em negrito são as cores das bordas. Em sublinhado o fundo e em Itálico a cor das letras. Entendido? Agora salve e vá em Layout. Adicione um gadgets HTML/JavaScript com o seguinte código:
<a href="Link"><imagem2><img src="Link da imagem" width="100px" /> <nome2>Nome do link</nome2></imagem2></a>