Tutorial: Texto hover na imagem

Pediram este tutorial para o Rih-kun um tempo atras e só agora que eu vi, andei lendo uns posts dele porque estou sentido falta, então mil desculpas por não ter postado antes... Que eu me lembre este efeito ele pegou do Tumblr e personalizou para o Blogger. O efeito é esse do primeiro gadget do Layout, mas eu também dei um toque meu para ficar um pouco mais completo ok? Se quiserem ver o preview de como eu fiz, está aqui neste link. O código é mostro, mas é bem fácil, nem precisa editar tanto. Querem fazer? Sabem onde clicar.

Abra o seu Html, aperte Ctrl+F e procure por ]]></b:skin>. Acima do código encontrado coloque: 

.imagem{
width:300px; /*largura da imagem*/
height:300px; /*altura*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}
.imagem:hover{
top:auto; /*modifique apenas se souber o que está fazendo*/
opacity: .8; /*opacidade da imagem quando passa o mouse*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}
.texto{
opacity: .1; /*opacidade do texto*/
width: 280px; /*largura do fundo do texto*/
height: 280px; /*altura*/
margin-top: -300px; /*margem do topo*/
margin-left: 0px; /*margem da esquerda*/
padding: 5px 5px; /*espaço entre o texto e a imagem*/
background: #e3eae7; /*cor do fundo*/
font-family: verdana; /*tipo da fonte*/
text-align: center; /*alinhamento do texto*/
font-size: 11px; /*tamanho da fonte*/
text-shadow: 1px 1px #fff; /*sombra do texto*/
color: #444; /*cor da fonte*/
outline: solid 1px #666; /*bordinha no bloco de texto*/
outline-offset: -2px; /*posição da bordinha*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}
.texto:hover{
opacity: .9; /*opacidade do texto quando passa o mouse*/
-webkit-transition-duration: .9s; /*duração do efeito*/
}

Para usar é só adicionar em um gadget HTML/JavaScript:

<center><div class="imagem"><img src="URL-DA-IMAGEM" /><div class="texto"><br />
SEU TEXTO AQUI
</div></div></center>

Pronto pessoal! Se usarem creditem o blog porque foi o Rih-kun quem fez u.u