Tutorial: Efeito Backy

ooi tudo bem ?  tudo legal ? vagas para afiliação ook 

Exemplo:

bom agora vamos lá Leia Mais>>

Vá em Modelo >> editar html >> e Aperte CTRL + F e procure por :

]]></b:skin>

e acima dele cole :

imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #CORDABORDA;float: left;} nome2 {position: absolute; display: block; width: 300px; height: 30px; top: 30px; margin-left: -20px; opacity: 0; text-align: center; color: #CORDOTEXTO; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #CORDABORDA; border-bottom: 3px solid #CORDABORDA; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 14px; 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)}

 Entendendo o código:

width: 100px; e height: 100px; : Este código que se encontra logo na primeira linha, é o valor da Largura e Altura.

Depois de editar seu código, vá até Layout > Adicionar um Gadget > HTML/Javascript e cole:

<a href="LINK"><imagem2><img src="LINK DA IMAGEM" width="100px" /> <nome2>ESCREVA O QUE QUISER</nome2></imagem2></a>

Prontiinho 

Créditos → Colors And Promisses

Postado Por Carolina P.