Tutorial - Efeito de descrição hover

 

Boa tarde!

Já é a minha segunda postagem aqui, espero que vocês realmente estejam gostando. Aqui onde eu moro está chovendo um monte, só pra estragar o ano novo. Azar ou não? Enfim, hoje eu trouxe um tutorial de descrição hover. Que eu me lembre a Kaorii já postou um tipo de descrição aqui, mas essa é bem diferente.

Eu achei os códigos no tumblr Css and HTML, mas foi eu que passei para o blogger. É um dos primeiros códigos que eu passo de tumblr para blogger, então é bem simples, mas vocês vão gostar, quem quiser ver como fica o resultado aqui está a preview: ♫ Legal né? Quem quiser usar é só continuar lendo.

Primeiro vá no seu HTML e pesquise (F3) por ]]></b:skin> e cole logo acima o seguinte código:

#photo{background:url(http://static.tumblr.com/frmjfs3/0Qkm7jcyc/shay.png);width:291;height:400px; border: solid 5px #c50f39;} .desc{width: 281px; height: 15px; display: inline-block; background: #000; opacity: 0.6; color: #999; -webkit-transition-duration: .90s; margin-top: -0px; overflow: hidden; position: absolut;padding:5px; text-align: justify; } .desc:hover{height: 390px; margin-top: -0px;}

Edite somente oque está em negrito. Depois  adicione um gadget java/script e cole nele:

<div id="photo"> <div class="desc"><center>{Title}</center><br><br> SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) SUA DESCRIÇÃO OU OQUE QUER QUE APAREÇA AQUI :) <br><br><br> </div></div>

E pronto! Agora é só editar o texto. Espero que tenham gostado do tutorial!