Tutorial - Efeito Caption

 

Boa tarde, gente.

Eu acordei cedinho hoje, mas quem disse que a preguiça deixou eu vir aqui postar? Me desculpem por isso, por favor, não queiram me matar. Prometo melhorar e mandar essa preguiça para longe. Estive pensando inclusive, em colocar postadoras aqui no blog, mas pelo menos o pessoal que mantém contato comigo pelo Facebook não achou boa a ideia. Ainda irei manter isso nos planos, procurando por aí alguém que poste de uma maneira legal no próprio blog e queira postar aqui.  Nada confirmado ainda, até porque eu não tenho espaço em gadgets para a equipe, se eu for colocar vejo se consigo dar um jeito e aviso a todos.

Bom, trouxe um tutorial para vocês que encontrei no DFY. Esse tutorial é bem parecido com um já postado, mas muda em alguns detalhes que alguns poderão notar. O efeito se chama "Caption" e é exatamente o que diz, apresentando uma legenda. Ao passar o mouse sobre a imagem, aparece uma legenda bem pequena e super fofa, pode ser usado em imagens pequenas e maiores também. Recomendo o uso em afiliados, fica a coisa mais linda do mundo.

Clique aqui para ver a preview e se gostar do efeito, siga com o tutorial.

1. 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.