
Nesse post, usarei o efeito de opacidade, onde as imagens ficam um pouco "apagadas", e voltam ao normal ao passar o mouse, dessa forma:

1. Efeito opacidade em todas as imagens do blog
Para usar esse efeito basta apenas ir ao HTML do blog e, acima de ]]></b:skin>, colar esse código:img {Salve e pronto, todas as imagens do blog ficarão com esse efeito.
opacity: .80;
-webkit-transition-duration: .40s;
}
img:hover {
opacity: 1.0;
}
2. Efeito opacidade nas imagens dos posts
Para usar esse efeito também é necessário apenas colar o código a seguir acima de ]]></b:skin>..post img {Salve e daí todas as imagens das postagens ficarão com o efeito.
opacity: .80;
-webkit-transition-duration: .40s;
}
.post img:hover {
opacity: 1.0;
}
3. Efeito opacidade em alguma imagem específica
Ao contrário dos outros efeitos, nesse é necessário colar dois códigos em dois lugares diferentes. Um na HTML do seu blog e outro no lugar específico onde quer usá-lo.1) Primeiro, você deverá colar acima de ]]></b:skin>, esse código:
.efeito {
opacity: .80;
-webkit-transition-duration: .40s;
}
.efeito:hover {
opacity: 1.0;
}
2) Por último, você precisa colar o pequeno código abaixo no lugar em que você deseja inserir a imagem com efeito.
<img src="LINK_DA_IMAGEM" class="efeito"/>Você pode colar em um post, em um gadget, em uma página, etc. E também pode colocar mais de uma imagem, é só repetir o código de acordo com a quantidade de imagens que quiser. Feito isso, o efeito já estará na imagem, ou nas imagens.
Além do efeito opacidade, você também pode aplicar outros efeitos da mesma forma, como bordas que mudem de cor, ou filtros de cor, como já mostrei nesse post.
Mas é isso, pessoal. Qualquer dúvida é só comentar, espero que tenham gostado.
Adorei o tutorial :D
ResponderExcluirBeijos,
http://www.paaradateen.com
Que bom que gostou >_<
ExcluirAdorei o tutorial :3 Bem
ResponderExcluirlegal !
#Kisses ♥
Visite ---> http://pensamento-jhenny.blogspot.com.br/
Ótimo que tenha gostado ^_^
ExcluirAjudou muito, Obrigada ^^
ResponderExcluiradolescentelouco-lol.blogspot.com
Que tuto ótimo, usando no meu blog *--* Estou seguindo o seu :)
ResponderExcluirhttp://universocute.blogspot.com.br/