Descrição Hover

Hoje vou ensinar a vocês como colocar colocar uma descrição no blog então a descrição esta no final da pagina se quiserem ver o efeito e só ir lá no (rodapé do blog). Vocês podem observar que tem uma imagem de uma garota e e só passar o mouse que vai aparecer a descrição hover . Espero que tenham gostado do efeito da descrição mas agora e mão na obra vamos la ?

Procure por ]]></b:skin> em seu Html 

e cole o seguinte código

#demo-5{position:relative;

-webkit-transition-duration: 250ms;}

#demo-5 .details{

opacity: 0;

position:absolute;

top:0;

left:0;

margin-left:-200px;  -webkit-transition: margin-left;

-webkit-transition-timing-function: ease-in;

-webkit-transition-duration: 250ms;

}

#demo-5:hover .details{

opacity: .8;

margin-left:0;

 background: #CORDOFUNDO;

font-size: 12px;

text-align: center;

width: LARGURApx;

height: ALTURApx;

-webkit-transition-duration: 250ms;}

Faça os ajustes necessários .E salve

Agora adicione um gadget de HTML/JavaScript e cole :

<div id="demo-5" class="demobox">

<img src="LINKDAIMAGEM"/>

<div class="details">

<h3>TEXTO MAIOR</h3>

<p>TEXTO MENOR</p></div></div>

Altere do seu jeito 

o efeito da descrição surpresa esta no rodapé(final) do blog! 

Bjs