• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

15 de dezembro de 2012

Efeito hover top


Olá meus amores, tudo bem? Espero que sim! Quero falar que amei o layout do blog (vi pelo print) mais infelizmente aqui não ta aparecendo como deveria, olhem como está:

Clique para ampliar! E olhe como deveria ter parecido aqui:


A menina que ganhou no sorteio o layout por favor responder o e-mail de novo, quero saber como vc quer que seja o layout! 
Enfim, vamos ao tutorial?
O efeito é lindo, clique aqui e passe o mouse no primeiro gadget para ver o efeito! Este efeito encontrei no tumblr e transformei para blogger, então créditos para Cssand-Html!
No seu html procure por:
]]></b:skin>
E acima cole:
#imgbaixo {background:url(link da foto);width:300;height:400px;}
.imghover{width:300;height:400px;}
.imghover:hover{margin-top:-50px;-webkit-transition-duration: .99s;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;} 
Aonde tem link da foto coloque o link da foto de baixo (quando passa o mouse) e aonde está em negrito troque pelo tamanho da imagem!

Agora adicione um gadget html/Java script e cole:

<div id="imgbaixo">
<img src="link da foto" class="imghover">
</div></div>

Sabe aonde trocar né? bjos em todos e visitem > Questão de opinião (comentem e sigam)

6 comentários:

  1. Nossa o tutorial é muito bom mesmo, amei


    http://newsdayoff.blogspot.com.br/

    ResponderExcluir
  2. o efeito eu já conhecia é muito legal, eu bate um print clica: http://static.tumblr.com/rc7pxsf/u7Vmf2sz0/sem_t__tulo.png

    ResponderExcluir
  3. Awwwn que blog lindo, eu ja conhecia, mas não era visitante, concerteza vou passar a visitar com frequencia, adooorei o layout de vcs.

    http://inthe-real-life.blogspot.com.br/

    ResponderExcluir
  4. Awn, amei o blog! é realmente lindo aqui, postagens super legais!

    http://kawaii-little-things.blogspot.com.br/

    ResponderExcluir