Como colocar efeitos nas imagens dos posts | Quero Dicas Quero Dicas : Como colocar efeitos nas imagens dos posts

Quero Dicas : Como colocar efeitos nas imagens dos posts

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

* Você reservou um tempinho para comentar? *

Desde já agradeço!

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


Nenhum comentário:

Postar um comentário

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir