Efeito Caption

Olá,  meus morangos com chantili.

Gente o Mundo Kawaii já tem 12 seguidores, sei que para alguns blogs isso é pouco, mas para mim já é um bom passo, obrigada a todas as visualizações, comentários e etc. Então, hoje é sexta !! Amanhã sábado, eba !! Depois de sábado, domingo !! E depois de domingo, segunda, que droga, mas né, fazer o que. Ai meu deus segunda tá chegando, tomara que eu tenha uma boa nota para eu não ficar de recuperação ou final, me desejem boa sorte.

Então agora vou falar sobre o assunto do post, " Efeito Caption" um efeito bem bonito para as imagens de seu blog. Você que gostaria de ter esse efeito em seu blog agora está esse tutorial no Mundo Kawaii !! Então esse tutorial de colocar efeito caption nas imagens do seu blog é bem simples, não é complicado, então para ver esse tutorial só precisa clicar em Mais Informaões


Vá até Editar HTML e procure por

]]></b:skin>

Acima dessa tag que você encontrou, cole o seguinte:

@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 2px 2px 0;}

captioon {position: absolute; background: #000; color: #fff; 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;}

Marquei as principais coisas que você pode querer alterar. O 2 equivale ao espaço de imagem para imagem. O 000 equivale a cor do fundo da legenda. O fff representa a cor da fonte. Edite e salve.


2. Crie um gadget de HTML/JavaScript e nele, cole:

<imagem class="caption">
<img src="LINK DA IMAGEM" />
<captioon>Legenda Aqui</captioon></imagem>



Edite as coisas em negrito/sublinhadas e salve. Seu efeito estará aplicado.