03/01/2013

Efeito - Before&After

Boa Noite !
Me perdoem por não vir ontem e nem antes de ontem , eu estava terminando de ver minha novela e meus animes, sim eu acabei antes de ontem Full House Take 2 , e simplesmente amei , e tão linda , recomendo . E eu não postei algo mais cedo hoje pois eu já estava criando uma postagem para quando eu trocar de Layout . Devo lhes dizer , que com a chegada de 2013 já comecei a fazer o esquema do novo projeto , já tenho em mente como será . Agora é só esperar vir o novo Layout que eu posto para vocês ele . 

Como eu disse , usei minha tarde para ir fazendo meu Layout , e uma postagem bem legal que ainda postarei . Então não deu tempo de fazer algum material , por que eu sou muito lerda , e eu ficaria a noite inteira fazendo . Bom , agora eu dei uma de postar efeitos , por que eu simplesmente amo eles , e adoro compartilhar com vocês , o escolhido dessa vez foi o Efeito Before&After , veja ele aqui (www) .Gostou ? 

Então prossiga marinheiro ~
#1 :  Vá no seu HTML e procure ( F3 ou CTRL+F) por ]]></b:skin> .
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 446px;
height: 365px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}
a.nowandthen.alt{
width: 300px;
height: 354px;
}
a.nowandthen.alt img{
clip: rect(0,300px,354px,0);
}
a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0);
}
#2 : Adicione um novo Gadget HTML/Javascript e nele cole :
 <a class="nowandthen"><img src="http://FOTO1" alt=""><img src="http://FOTO2" alt=""></a>

Créditos : (www) .

3 comentários:

  1. Que lindo *--*

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

    ResponderExcluir
  2. Não deu certo no meu ! Beijos :-*

    ericagirlfashion.blogspot.com.br

    ResponderExcluir

-Primeiro , não não peça Tutoriais / Materiais pelos comentários , use a Ask - me .
-Não desrespeite ninguém , tenha educação .
- Comente sobre o post .
- Deixe a sua url no fim do cometário para que eu posso lhe retribuir o mesmo .