Descrição Hover

Ola lindos e lindas da minha blogosfera! Tudo bem com vocês? Comigo está ótimo, fora ter que acordar todo dia cedo para ir para a escola >.< Odeio acordar 6h da manhã para me arrumar!

Awn, meu Deus, minha amiga teve uma irmã, ela parece uma boneca! Quando der um tempinho eu posto aqui uma foto dela...

Hoje vim trazer para vocês um tutorial lindo que acabei de encontrar lá no Kawaii World, que está lindo com o novo layout da Miley Cyrus! Afinal, a Kaorii faz esses layout's incríveis neh? *-*

Agora chega de papo, porque ninguém gosta de ficar lendo tanto apenas para um tutorial!

Se quiserem ver a preview da descrição clique aqui, e vá até o widget, ''Descrição hover''...

Primeiramente, procure por ]]></b:skin> e logo acima cole o seguinte código

#photo{background:url(Url da Imagem);width:Largurapx;height:Alturapx; border: solid Tam. Bordapx #cor borda;} .desc{width: Largura Backgoundpx; height: Altura Backgroundpx; display: inline-block; background: #Cor Background; opacity: 0.6; color: #Cor da Letra; -webkit-transition-duration: .90s; margin-top: -0px; overflow: hidden; position: absolut;padding:5px; text-align: justify; } .desc:hover{height: Altura até aonde vai o Backpx; margin-top: -0px;}

 Aonde está Url da imagem você coloca a URL da sua imagem, em Largura, você coloca a largura da sua imagem, em Altura você coloca a altura da sua imagem, Tam. Borda, você colocará o tamanho da sua borda, se não quiser coloque 0, cor borda, você coloca-rá a cor da sua borda, se estiver sem borda, pode colocar qualquer uma... Em Largura Background você coloca a largura do fundo preto que aparece, eu coloquei 10px menor que a da minha imagem, altura background, coloque a altura do fundo preto que não está em hover. Cor Background coloque a cor do fundo que o meu está preto, Cor da letra, obviamente é a cor da sua letra, Altura até aonde vai o back, é a altura do fundo preto em hover, coloque a mesma da imagem.

Agora adicione um gadget de Html/javascript e cole

<div id="photo"> <div class="desc"><center>Passe o Cursor aqui!</center><br /><br />Bem vindos ao meu blog, aqui vocês encontraram várias calcinhas que coleciono...<br /><br /><br /> </div></div>

Se quiser igual o do blog de testes, ao invés de personalizar aquele do HTML do blog, cole esse:

#photo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRGL8fBggaiDTAOA-KOSD_FDUuRe2JAQ561r4VYkkfNZmTC0prA4JACn6kvgbGykqL5aMWQj7KBs_j9AluXTTdQhcUZKUM3qz9qaSphKp1UjikI6SUdPUuCer2v6FqOJfogRxHlMDWCFyb/s1600/capture-20130313-210137.png);width:252px;height:148px; border: solid 0px #c50f39;} .desc{width: 242px; 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: 139px; margin-top: -0px;}