Colocar 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 emProsseguir.

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 seguidaSalve o Modelo.

Este código foi todo personalizado por mim,e vou esta explicando a vocês algumas partes do código que poderão ser alterada por vocês.

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. (Clique Aqui para escolher uma Cor).
• 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" .

Prontinho pessoal, espero terem gostado deste efeito.
Queria pedir a você que curtisse a Pagina do Varias Dicas Para Blogs (agradeço todos que curtirão) obrigado

Post Relacionados