Gadget Autores - Efeito Legenda !

Yoo ~~

Bom, eu como sou muito besta, esqueci que tenho um Tumblr de pedidos, então eu tava olhando minhas gadgets e vi, quando abri, estava alguns pedidos, que eu espero que não seja de muito tempo ! Então eu vou postar, o que vocês me pediram lá !

Começando com o tutorial da Gadget autores, igual ao que temos aqui no blog, tem a imagem e quando você passa o mouse, aparece o nome do Autor vejam:

Vamos aprender ?

Enjoy ~~

Vá em Painel> Editar HTML e procure por:

]]></b:skin>

Depois que achar cole em cima:

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

background: #000000; } Troque ambos pela cor do fundo da caixinha que aparece quando você passa o mouse.

background-color: #000000;

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; } Cor do fundo da bolinha.

background: #ff55a9;

color: #FFF; } Cor do símbolo da bolinha.

Depois crie uma gadget HTML e cole:

<figure class="cap-left">

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

<figcaption>TEXTO</figcaption>

Pronto !

Créditos KW