imagem hover diferente! :D

Oiiii

Trouxe um tutorial de imagem hover diferente, os creditos vao ao HTML my love, é lindo vc vão adoooorar e é super facil de fazer.

»> Visualize o efeito aqui «<

Comece colando esse código no seu css (antes de </style>):

a.nowandthen{position:relative;display: block;overflow:hidden;cursor: pointer;}

a.nowandthen img{position:absolute;-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;}
a.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,0px,0);opacity: 0;}
a.nowandthen.alt{width: LARGURA DA IMAGEMpx;height: ALTURA DA IMAGEMpx;}


a.nowandthen.alt img{clip: rect(0,LARGURA DA IMAGEMpx, ALTURA DA IMAGEMpx,0);}

;}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0, ALTURA DA IMAGEMpx,0
)

Entenda o código: onde está escrito LARGURA DA IMAGEM e ALTURA DA IMAGEM vc deve trocar pelo valores da sua imagem, cuidado para não apagar algo importante. As imagens devem ter o mesmo valor. Depois cole o seguinte código onde quer que apreça:

Código aqui 

Espero que tenham entendido ok! 

Kissus,

Aline