Como colocar as imagens no blog com efeito Zoom | Quero Dicas | Tutoriais para seu blogs


Como colocar as imagens no blog com efeito Zoom


Hoje eu trouxe um tutorial de imagem com efeito Zoom que eu aprendi no Kawaii World. Esse efeito é bem legal para vocês colocarem nas imagens do seus blogs. Eu achei show! Espero que vocês também gostem.


Clique no botão "Demostração" e veja o resultado.


Instalando

1 - Acesse o painel do seu blog.

2 - Vá em "Modelo" e "Editar HTML"

3 - Tecle Ctrl + F e procure por:

 /* Posts
-------------------------------- */ 

4 -  Abaixo dele, cole:

 .post img {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.2s linear; /*----Tempo de transição ----*/ 
background-color: #00BFFF; /*---- Cor ----*/ 
padding: 2px;
}
.post img:hover {
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
background-color: #FFC0CB; /*---- Cor ----*/ 
padding: 2px;
} 



      Personalizando

Agora é só personalizar as cores que deixei em destaque para vocês.

Tabela de cores - AQUI

SAIBA: Ao colocar este tipo de efeito no seu blog, as que tem fundo transparente, elas ficaram com todo o fundo igual a cor escolhida para a borda das imagens.

E ai, gostou? Então deixe seu comentário! Beijinhos
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.