Tutorial - Image Flip


Boa noite, cheirosos (=^・ω・^=)

Fiz uma nova ask para o blog, quem quiser perguntar ou pedir algo, é só ir até o final do gadget, ok? Ah, e também abri novas vagas para afiliações, pois alguns daqueles blogs quase nem me visitavam, e porque a lista estava muito cheia e embolada, ia ficar feio aquela lista enooorme no blog. Quem quiser se afiliar, é só pedir pela ask. E sobre o layout? Vocês gostaram? Espero que sim, fiz com muito carinho pra vocês *u*

Hoje eu irei ensinar vocês a fazerem um efeito suuper legal, para gadgets de welcome. Realmente, o efeito é muito show. Tenho certeza de que vocês vão gostar. Passei ele do tumblr para o blogger, então se reblogarem, creditem. Ah, para visualizarem o efeito, cliquem aqui :3

1- Procure por ]]>< e acima desse código cole:
/***IMAGEM FLIP SIMONE (CEREJADOSUNDAE)***/
#imagesm {background: transparent;padding:4px; width:170px;height:200px;-webkit-box-shadow: -1px -1px 12px rgba(50, 50, 50, 0.38);
-moz-box-shadow:    -1px -1px 12px rgba(50, 50, 50, 0.38);
box-shadow:         -1px -1px 12px rgba(50, 50, 50, 0.38);}
#imageside:hover{-webkit-transition-duration: .90s;
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);}
.imageside { padding:4px; width:170px;}
.imageside .imagesm {width:170px;color:#fff;margin-top:-110px;opacity:0;-webkit-transition-duration: .99s;}
.imageside:hover .imagesm {margin-top:10px;opacity:1;-webkit-transition-duration: .99s;transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}
.imageside .descr {width:160px;height:190px;-webkit-transition-duration: .99s;opacity:1;margin-top:-450px;background: rgba(0, 0, 0, 0.5);color:#fff;padding:4px}
.imageside:hover .descr {-webkit-transition-duration: .99s;margin-top:-210px;opacity:1;-webkit-transition-duration: .90s;}
.image{width:170px;height:200px;positon:fixed;-webkit-transition-duration: .90s;;}
.image:hover {-webkit-transition-duration: .90s;
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);}
2- Para usar o efeito, basta adicionar o código abaixo num gadget de HTML/JavaScript:
<div class="imageside"><div id="imagesm"><img src="http://25.media.tumblr.com/tumblr_m5sctx1eig1rnkpueo1_500.jpg"class="image"><div class="imagesm"><div class="descr">Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.Escreva algo aqui, sua descrição, sei lá, alguma coisa média, apra poder ocupar o espaço.</div></div></div></div></div></div>
3- Edite na sua preferência e salve.

2 comentários: