Olá pessoal que acessa o blog! Como primeiro tutorial aqui do blog, explicarei como colocar efeito nas imagens do blog. Não sabe do que eu estou falando? Passe o mouse em cima de alguma imagem do blog e veja que ela vai ficar "colorida". Vou ensinar várias maneiras de personalizar o efeito, vamos conferir?
Pegue sua preferida e cole em cima de ']]></b:skin>' no seu HTML
1. Preto e branco quando passa o mouse
.post img {
-webkit-filter: saturate(100%) ;
-webkit-transition-duration: .90s;
}
.post img:hover {
-webkit-filter: saturate(0%) ;
-webkit-transition-duration: .90s;
}
2. Opacidade quando passa o mouse
.post img {
-moz-opacity:1.0; opacity:1.0;
-webkit-transition-duration: .90s;
}
.post img:hover {
moz-opacity:0.92;
opacity:0.92;
-webkit-transition-duration: .90s;
}
3. Bordas na imagem
.post img {
border: 3px solid #e00000;
-webkit-transition-duration: .90s;
}
.post img:hover {
border: 3px solid #000;
-webkit-transition-duration: .90s;
}
Entendendo o código:
Onde tem '3px' é a espessura da sua borda, ou seja, quando mais você aumenta, mais grossa a linha fica.
Onde tem 'solid' é o tipo de borda. Se quiser uma linha tracejada, troque 'solid' por 'dashed', e se quiser uma linha pontilhada, troque por 'dotted'.
Onde tem '#e00000' é a cor da sua fonte. Pode mudar a vontade, só não se esqueça de começar com '#'.
Depois é só salvar.
É isso pessoal, qualquer dúvida sintam-se livre para comentar! Espero que gostem ^^
