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 seus posts, não é?

Por este fato, mostro um lista de efeitos bem legais e fáceis de instalar. E o melhor, 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? Comente!
Beijinhos 
COMPARTILHE :  

Comentários
0 Comentários


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.