Efeito Descrição Hover

Yo meus bunnys lindinhos, como vão vocês? Achei um efeito bem legal de descrição hover, o efeito e simples porém e bem legal. Os créditos são do blog KW , como eu disse o efeito e bem simples mas achei bem legal. Se quiser dar uma olhada no efeito antes de aplica-lo em seu blog basta clicar no link que se encontra mais abaixo.

.::Ver efeito online::.

1. Siga ate seu HTML  e use o Ctrl+F pra achar ]]></b:skin>, e acima dele cole:

Códigos

#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;}

 2. Altere as partes em negrito como se pede, e salve. Vá ate seu layout e abra um HTML/JavaScript, cole:

Códigos

<div id="demo-5" class="demobox">
<img src="LINKDAIMAGEM"/>
<div class="details">
<h3>TEXTO MAIOR</h3>
<p>TEXTO MENOR</p></div></div>