Imagem Flip

Hiiii amoras com chocolate e abacaxi!!!

hoje vou atender um pedido e acho que a nossa leitora vai gostar muito, veja o comentário dela:

hmm...então é isso o que vamos aprender hoje!

Bem, começando, esse efeito se chama imagem flip, se quiser visualize aqui, créditos aqui.

Colem o código abaixo no css:

/***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);}

destaquei em negrito a parte que você deve modificar para mudar o tamanho da imagem.

Cole o código abaixo em um HTML/javascript, clique aqui pra ver o código.

Fácil né?! depois é só trocar a foto e o texto, e para trocar as cores no css, aqui está a tabela de cores.

Beijos e obrigada lavynnya pela sugestão de post, e desculpa a demora!