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) .