Header Ads

Efeito Backy Para Equipe

Imagem pega no KW
                   



 Oie, Tudo bem? uma Leitora pediu um efeito diferente, eu não conhecia muito, e pedir a Aline o Tutorial do quem somos igual ao dela, para quem não sabe quem é a Aline é uma Antiga Postadora nossa ela é a dona no Explodindo Glitter, Voltando ao assunto ela postou e eu vou tá repassando para quem me pediu.



1.vá em editar html dê F3 e procure por: </b:skin> acima dele cole: 


imagem2 {margin: 3px; width: 100px; height: 100px; overflow: hidden; position: relative; border: 3px solid #A0514C;float: left;} nome2 {position: absolute; display: block; width: 300px; height: 30px; top: 30px; margin-left: -20px; opacity: 0; text-align: center; color:#A0514C; background: #fff; -webkit-transition-duration: 0.8s; border-top: 3px solid #A0514C; border-bottom: 3px solid #A0514C; line-height: 4px; text-transform: uppercase ; -webkit-transform: rotate(-15deg); font-size: 15px; font-family: 'play'} imagem2:hover nome2 { left: 20px; top: 60px; bottom: 5px; opacity: 1; width: 103px; height: 20px; line-height: 20px; -webkit-transform: rotate(0deg)}

acho que não preciso nem explicar né?

2. em layout, adiciona HTML/JavaScript e nele cole:

 <a href="Link"><imagem2><img src="Link da imagem" width="100px" /> <nome2>Nome do link</nome2></imagem2></a>  
 Gostaram? Se usar lembre de creditar o Sweet land o Explodindo Glitter e o We Heart HTML.

7 comentários:

  1. Anônimo1:34 PM

    Linda,te coloquei como afiliada!

    World-Of-Tuos.blogspot.com

    ResponderExcluir
  2. Ficou lindo o novo lay.. parabéns!!! muito kawaiii *o*

    ResponderExcluir
  3. Que legal o efeito, funciona em todos os navegadores?
    bjoss!

    ResponderExcluir
    Respostas
    1. geralmente, ele funciona só em google chrome mais acho que no mozila támbem

      Excluir
  4. Anônimo11:39 AM

    Qualquer duvida,comentem

    ResponderExcluir

Tecnologia do Blogger.