Efeito change

Tadaima ^^

Não, o efeito de hoje não tem nada de espectacular. Na verdade, classifiquei-o como um dos mais simples do mundo. Mas fui eu que fiz, achei engraçadinho e portanto trouxe. Consiste em mudar algo por completo. O gadget não tem nada de extenso, e o próprio tutorial também não. Eu usei para imagens. Cria duas imagens diferentes, e a url é colocada com um background. É muito parecido com o efeito Before&After, mas bem mais fácil.

Prévia:

Tutorial:

Procure por:

/b:skin

Acima acrescente:

.change {
margin: 0px 0px 0px -20px;
width: 325px;
height: 325px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-FbStVjG5-xnLqAcGBFhUIPdd0zlHNwJXaH2gWd6I2qvahVkXm_fAt-ZRlDaFXGZrwrb1SeKdR-AVvQ9W-8qEsVRA1g-21sSDEV1aqxnzir0bf2_9xr3OVK2VtjS4iIVxei4GGDwDcCL/s1600/baibai.png) no-repeat;
-webkit-transition-duration: .60s;
}
.change:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JqjPymiycwp0mOAaUb3E6LLmik4yZ0eKMXVq5ZPyfvNfvAsYmlX3P05iAlEs3BpWYwEIphBQJdUKYooodtOqr6nLUOvTYPJmb6zNBNvTT47yTZ7hWagxZaPshb0dc2GvcAit2Lvj695Z/s1600/baibai2.png) no-repeat;
-webkit-transition-duration: .60s;
}

Substitua a url das imagens pelas que quiser.

Cole num gadget HTML/Javascript:

<div style="margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; position: absolute;">
<div class="change">
</div></div>

Voilá ^^