Tutorial - Efeito Caption ~nya!

Heeeello, meus amorecos sz'

Depois de tantas novidades -acreditem falta mais- resolvi trazer um tutorial, já que faz tempo que nem posto para vocês, espero que assim eu consiga respirar mais um pouco, e as novidades nunca acabam, eu pensei que seria mais fácil, tomando em prioridade as dos filmes, mais acho que não -q

Trouxe um efeito, o nome dele e Caption, os créditos são do tumblr htmluv, mais quem repassou para o blogger foi a Rafs. do FYB, então creditem aos três (Htmluv,Fyb,Bmp) O efeito e uma faixinha que aparece do lado esquerdo, e fica em toda a imagem, com alguma coisa escrita, mais para quem não entendeu, veja a preview aqui: ♥. Vamos aprender?

1. Vá no seu HTML, aperte F3 e procure por: ]] Quando achar, cole acima dele o código:

/** EFEITO CAPTION **/

@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}

imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 3px 3px 0;}

captioon {position: absolute; background: #COR DA FAIXINHA; color: #COR DA LETRA (dentro da faixinha); padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}

imagem:hover captioon {opacity: 0.75;}

imagem:hover:before {opacity: 0;}

.caption:before {bottom: 10px; right: 10px;}

.caption captioon {bottom: 3px; right: 30%;}

.caption:hover captioon {right: 0px;}

Explicação: Eu editei, algumas partes para vocês entenderem melhor, coloquei o COR DA FAIXINHA, nesse lugar você vai colocar a cor do fundo (-no preview está preto) e no COR DA LETRA, coloque a cor que fica dentro da faixinha, que no preview está branco.

2. Agora, adicione um gadget HTML/Javascript e nele cole:

<imagem class="caption">

<img src="URL DA IMAGEM">

<captioon>ESCREVA AQUI</captioon></imagem>

<imagem class="caption">

<img src="URL DA IMAGEM">

<captioon>ESCREVA OQUE QUISER AQUI</captioon></imagem>

Bem, eu que coloquei o URL DA... é essas outras coisas, então caso ver no seu blog, sem créditos (-ferrou.