Efeito zoom na imagem (tutorial css)

Hey guys!
Um leitor do blog pediu pra min ensinar esse efeito que coloquei aqui nas imagens do blog e já aviso: é muito fácil! rs

Eu criei esse efeito porque no novo design a area os posts ficou meio "slim" rs dai as imagens dos tutoriais estavam super pequenas, mas se vc quer usar pra "causar" rs também é uma boa, o efeito ficou show e só usa CSS3!

Para usar apenas copie o código abaixo e cole no seu template (acima de ]]></b:skin> )

/**** EFEITO ZOOm NA IMAGEM DO POST ****/
.post-body img{
max-width:480px;  /* EDITE o TAMANHO DA IMAGEM SEM ZOOM */
border:4px #fff solid !important; /* EDITE A COR DA BORDA */
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition: all 2s;
transition: all 2s;
display:block;
position:relative !important
}

.post-body img:hover {
max-width:840px !important; /* EDITE o TAMANHO DA IMAGEM COM ZOOM */
border-color:#000 !important; /* EDITE A COR DA BORDA */
box-shadow: 0 4px 11px #aaa !important;
height:auto;
overflow:none !important;
position:relative !important;
}

/**** EFEITO ZOON by [ zaadesign ] ****/

  Modifique APENAS o tamanho da imagem e a cor da borda, nada mais ok?
Espero que gostem...


Tutorial original do blog Candyyland :)
Proibido reblogar

Se gostou desta postagem, não esqueça de subscrever o nosso rss feed.