Efeito Zoom de Imagens nas postagens do Blog

Olá pessoal!!! Novamente estou aqui pra mostrar mais um Efeito CSS bem legal pra colocar no Blog.
Vou ensinar como colocar Efeito Zoom de imagens nas postagens do blog

Sobre o efeito: o efeito acontece quando passamos o cursor do Mouse (acima) sobre as  imagens.

Vamos colocar no Blog
1° Acesse  o HTML do seu blog, Vá em Modelo >> em Editar HTML >> e clique em Prosseguir.

2° E no HTML do seu blog, pressione as teclas Ctrl + F do seu teclado para (ativar dispositivo de pesquisa) e busque por esse Tag:

]]></b:skin>

3° Ao encontrar o Tag, acima dele você vai acrescentar este código CSS:

.post-body img {

-webkit-transition: all 0.15s linear;

-moz-transition: all 0.15s linear;

transition: all 0.15s linear;

}

.post-body img:hover{

border:1px solid #000;

-webkit-transform:  scale(1.302);

}

Pronto, agora clique em Visualizar para ter certeza que não tem erros, e em seguida Salve o Modelo.


Altere o código:

• A parte que eu destaquei em Cor vermelha "1px" se trata da Espessura da Borda que aparece na imagem, então se você deseja aumentar a espessura da borda, altere o seguinte valor "1".
• E a para alterar a cor da Borda, substitua o código destacado em Azul "#000" por uma cor que você quer colocar no seu blog. 
• E se você que Aumentar ou diminuir o tamanho do "Zoom da imagem", altere o seguinte Valor que eu destaquei em cor de Rosa "1.302" .