Oi oi oi. Eu estava aqui ás 4 horas da manhã e resolvi fazer esse efeito tuts tuts Ele é fofinho, dá para colocar em parceria, moderação ou na side mesmo. Bom, aqui está o preview. Vamos ao tutorial.
Cole esse código entre <style> e </style>
.efeitoone {position: fixed; margin-left: MUDAR NUMEROpx; margin-top: MUDAR NUMEROpx; -webkit-transition-duration: 0.80s; width: 150px; }
.efeitoone img {position:fixed;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out;display: block;background-color: ;padding:0px;margin-left:0px;margin-top:0px;opacity:0.8;-webkit-transition-duration: 0.8s;opacity: 1.0;}
.efeitoone img:hover{ -webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);opacity:0.2;-webkit-transition-duration: 0.80s;opacity:0.7; #pattern opacity:0.7;margin-top: -40px; margin-left: -40px;}
.efeitoone img.top { opacity:1;}
.efeitoone:hover img.top, .cf4.hover_effect img.top {opacity:0;}
.efeitoone:hover img.bottom, .cf4.hover_effect img.bottom {filter:gray;opacity:1.0;}
Explicando: onde está MUDAR NUMEROpx você vai - obviamente - colocar o numero que você quer para definir o lugar da foto. Mude só isso, se não vai bugar o efeito.
Agora cole isso entre <body> e </body>
<div class="efeitoone" class="hover">
<img class="bottom shadow" src="https://31.media.tumblr.com/c6f10561e15ceb30f4a828b0513be851/tumblr_inline_mysmarPkGx1rgbzi1.png" style="-webkit-filter: grayscale(70%);" width="250">
<img class="top shadow" src="https://31.media.tumblr.com/c6f10561e15ceb30f4a828b0513be851/tumblr_inline_mysmarPkGx1rgbzi1.png" width="250"></div></div>
Explicando: mude apenas o que está em negrito, o código maior é o link da foto, e o menor (width) é o tamanho da foto.
Fácil, rápido e simples. Espero que tenham gostado. Se usarem deem like e creditem ^^
Por Gio.
