23 de out de 2012

Efeito na Legenda!

Tumblr_m392y9ncz21qevi26o1_500_large
Olá queridos! Vocês sabem que efeito é esse né!? Tem até no " Quem Escreve" do Blog....
Pra quem não sabe é este aqui:


Fofo não!? E que tal aprender á colocar este efeito no Seu Blog!?

Vamos lá!

Pesquise por:

]]></b:skin>

Antes 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; }

Salve e abra um HTML /  Java Script e cole:

<figure class="cap-left">
<img src="LINK DAIMAGEM" alt="" />
<figcaption>TEXTO</figcaption>
</figure> 


Gostaram!? Eu ADORO este efeito na foto da Autora....

Beijinhos!



Nenhum comentário:

Postar um comentário

Related Posts Plugin for WordPress, Blogger...