Efeito na legenda

Yoo!

Hoje eu vou ensinar a fazer um efeito muito legal na hora de colocar legendas na imagem. Tem a mesma função de um tooltip. Como sempre é do tumblr, então os códigos não são meus, mas eu passei para blogger e fiz todo o tutorial então vocês precisam creditar. Os engraçados que querem questionar, nem usem.

Acho que ele fica bem legal pra ser usado em gadgets do tipo blogs irmãos, destaques ou autoras.

1. Procure por ]]></b:skin> e antes da tag, cole:

figure {

  display: block;

  position: relative;

  float: left;

  overflow: hidden;

  margin: 0 10px 10px 0;

  -moz-transition: all 0.6s ease;

}

figcaption {

  position: absolute;

margin-bottom: 10px;

  background: #000000;

  background-color: #000000;

  color: #FFFFFF;

  padding: 3px 3px;

  opacity: 0;

  -webkit-transition: all 0.8s ease;

  -moz-transition:    all 0.8s ease;

  -o-transition:      all 0.8s ease;

}

figure:hover figcaption {

  opacity: 0.9;

}

figure:before {

  content: "?";

  position: absolute;

  font-weight: 800;

  background: #ff55a9;

  background: #ff55a9;

  text-shadow: 0 0 5px white;

  color: #FFF;

  width: 24px;

  height: 24px;

  -webkit-border-radius: 12px;

  -moz-border-radius:    12px;

  border-radius:         12px;

  text-align: center;

  font-size: 14px;

  line-height: 24px;

  -moz-transition: all 0.6s ease;

  opacity: 0.75; }

figure:hover:before {

  opacity: 0;

}

.cap-left:before {  bottom: 10px; left: 10px; }

.cap-left figcaption { bottom: 0; left: -30%; }

.cap-left:hover figcaption { left: 0; }

- Entendendo o código:

  background: #000000;

  background-color: #000000;

Troque ambos pela cor do fundo da caixinha que aparece quando você passa o mouse.

  color: #FFFFFF; 

Essa é a cor da letra da caxinha.

content: "?";

? é o que aparece dentro da bolinha. Troque por outro símbolo se quiser.

 background: #ff55a9;

  background: #ff55a9; 

Cor do fundo da bolinha.

color: #FFF;  

Cor do símbolo da bolinha.

2. Cole isso em um gadget de HTML/Javascript:

<figure class="cap-left">

<img src="LINK DAIMAGEM" alt="" />

<figcaption>TEXTO</figcaption>

</figure>

Prontinho!