Como colocar efeitos nas imagens dos posts | Quero Dicas | Tutoriais para seu blogs


Como colocar efeitos nas imagens dos posts

Depois de algum tempo sem publicar postagens de como personalizar ou customizar seu blog, hoje eu resolvi trazer o post Como colocar efeitos nas imagens dos posts. Afinal, quem não gosta de dar aquela caprichada no blog, principalmente, nas imagens dos posts, não é?

Por este fato, mostro um lista de efeitos bem legais e fáceis de instalar. E o melhor não para por ai, quando enjoar basta trocar ou apagar o código que escolheu. Não é o máximo?

• Escolha um dos efeitos abaixo e teste, dê preferência, em um blog de testes. ok?

Tutorial

1 - Escolha um dos efeitos abaixo

2 - Acesse o Painel do seu blog > Modelo > Editar HMTL

3 - Dentro da caixa dos códigos, tecle Ctrl + F para expandir a caixa de busca

4 - Dentro dela digite ]]></b:skin> e clique em Enter para localizar

5 - Acima dela, cole um dos efeitos abaixo escolhido

Efeito 1: Imagens arredondadas

 Este efeito deixa as imagens arredondadas ao passar o mouse sobre elas

 
.post img {
-webkit-transition-duration: .50s;
border-radius: 5px 5px 5px 5px;
}
.post img:hover {
-webkit-transition-duration: .50s;
border-radius: 200px 200px 200px 200px;
}


Editando ao seu gosto:
• Para aumentar o arredondamento dos cantos nas imagens em estado normal altere os valores em border-radius: 5px 5px 5px 5px;
→ Se  não quiser deixar as imagens arredondas troque pelo valores 0.

• Para alterar o arredondamento nas imagens em estado hover altere em border-radius: 200px 200px 200px 200px;
→ Se quiser arredondar somente de um lado ou lados específicos, mexa nos valores (200px) até ficar como deseja.

Salve.
Prontinho, simples e fácil.

Efeito 2: Imagens Menos Zoom

Este efeito deixa as imagens menores ao passar o mouse sobre elas

 
.post img {
-webkit-transition-duration: .50s;
border-radius: 5px 5px 5px 5px;
}
.post img:hover {
-webkit-transition-duration: .50s;
border-radius: 200px 200px 200px 200px;
}

Editando ao seu gosto:
• Para aumentar o arredondamento dos cantos nas imagens em estado normal altere os valores em border-radius: 5px 5px 5px 5px;
→ Se não quiser deixar as imagens arredondas troque pelo valores 0.

• Para alterar o distanciamento das imagens em estado hover altere em transform: scale(0.8);
→ lembrando que quanto menor o numeral, mais ditante a imagem ficará.

Salve.
Prontinho, simples e fácil.

Efeito 3: Imagens Mais Zoom

Este efeito aumenta as imagens ao passar o mouse sobre elas

 
.post img {
-webkit-transition-duration: .50s;
border-radius: 5px 5px 5px 5px;
}
.post img:hover {-webkit-transform: scale(1.3);-ms-transform: scale(1.3); transform: scale(5.3);
}


Editando ao seu gosto:
• Para aumentar o arredondamento dos cantos nas imagens em estado normal altere os valores em border-radius: 5px 5px 5px 5px;
→ Se não quiser deixar as imagens arredondas troque pelo valores 0.

• Para alterar o Zoom das imagens em estado hover altere em transform: scale(5.3);
→ lembrando que quanto maior o numeral, mais próximo a imagem ficará.

Salve.
Prontinho, simples e fácil.

Efeito 4: Estado hover

Este efeito deixa as imagens mais clarinha ao passar o mouse sobre elas
 
.post img {
-webkit-transition-duration: .50s;
border-radius: 5px 5px 5px 5px;
}
.post img:hover {-moz-opacity: 0.5; opacity: 0.5 ;
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; 
}

Editando ao seu gosto:
• Para aumentar o arredondamento dos cantos nas imagens em estado normal altere os valores em border-radius: 5px 5px 5px 5px; → Se não quiser deixar as imagens arredondas troque pelo valores 0.

• Para alterar o claridade das imagens em estado hover altere em opacity=50 → lembrando que quanto maior o numeral, mais claro a imagem ficará.

Salve. Prontinho, simples e fácil.


Efeito 5: Preto e Branco

Este efeito deixa as imagens preto e branco ao passar o mouse sobre elas
 
.post img {
-webkit-transition-duration: .50s;
border-radius: 5px 5px 5px 5px;
}
.post img:hover {-webkit-filter: saturate(0%) ;-webkit-transition-duration: .90s;}rogid:DXImageTransform.Microsoft.Alpha(opacity=50)"; 
}

Editando ao seu gosto:
• Para aumentar o arredondamento dos cantos nas imagens em estado normal altere os valores em border-radius: 5px 5px 5px 5px;
→ Se não quiser deixar as imagens arredondas troque pelo valores 0.

Salve.
Prontinho, simples e fácil.

Efeito 6: Giratório

Este efeito faz com que suas imagens girem ao passar o mouse sobre elas
 
.post img {
-webkit-transition-duration: .50s;
border-radius: 5px 5px 5px 5px;
}
.post img:hover { -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(360deg);
}


Editando ao seu gosto:
• Para aumentar o arredondamento dos cantos nas imagens em estado normal altere os valores em border-radius: 5px 5px 5px 5px;
→ Se não quiser deixar as imagens arredondas troque pelo valores 0.

• Caso deseja que imagem para ao contrario em estado hover altere transform:rotateY(360deg); para 180deg

Salve.
Prontinho, simples e fácil.

Efeito 7: Giratório

Este efeito gira suas imagens no sentido anti-horário e pare aumentando sua proporção ao passar o mouse sobre elas

 
.post img {
-webkit-transition-duration: .50s;
border-radius: 5px 5px 5px 5px;
}
.post img:hover { -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;transition: all 1s ease;
-moz-transform: scale(1.2) rotate(-720deg) ;
-webkit-transform: scale(1.2) rotate(-720deg) ;
-o-transform: scale(1.2) rotate(-720deg) ;
-ms-transform: scale(1.2) rotate(-720deg) ;transform: scale(1.2) rotate(-720deg);
}

Editando ao seu gosto:
• Para aumentar o arredondamento dos cantos nas imagens em estado normal altere os valores em border-radius: 5px 5px 5px 5px;
→ Se não quiser deixar as imagens arredondas troque pelo valores 0.
Salve.
Prontinho, simples e fácil.

Gostou dos efeitos? Deixe seus comentários.
Beijinhos 


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.