Cherry Candy //Oficial: Efeito na Equipe

segunda-feira, 24 de dezembro de 2012

Efeito na Equipe


~Oy~

Vou ensinar a colocar o efeito é muito fácil então vamos aprender ...


Vá em Design, editar HTML, e procure por: ]]></b:skin>

E acima dele, cole isto;
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; /*Cor da fonte*/  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: &quot;?&quot;;  position: absolute;  font-weight: 800;  background: #87CEFA; /*cor do fundo*/  background: #87CEFA;/*cor do fundo*/  text-shadow: 0 0 5px white;  color: #FFF; /* cor da fonte*/  width: 24px; /*Largura*/  height: 24px;/*Altura*/  -webkit-border-radius: 12px;  -moz-border-radius:    12px;  border-radius:         12px;  text-align: center;  font-size: 14px;/*Tamanho da fonte*/  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; }
Para ele aparecer, vamos colocar o próximo código em um novo gadget do HTML/JavaScript, e colar nele isto:

<figure class="cap-left"><img src="URL da Imagem" alt="" /><figcaption>O Nome aqui</figcaption></figure> <figure class="cap-left"><img src="URL da Imagem" alt="" /><figcaption>O Nome aqui</figcaption></figure> <figure class="cap-left"><img src="URL da Imagem" alt="" /><figcaption>O Nome aqui</figcaption></figure>

Depois é só salvar é visualizar , Tchauzin 



Nenhum comentário:

Postar um comentário