Como aplicar efeito em várias imagens

Oi, gente! Hoje trouxe um tutorial bem simples de como colocar algum efeito nas imagens do blog inteiro, nas imagens dos posts ou em apenas uma imagem específica.

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 {
opacity: .80;
-webkit-transition-duration: .40s;
}
img:hover {
opacity: 1.0;
}

Salve e pronto, todas as imagens do blog ficarão com esse efeito.

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 {
opacity: .80;
-webkit-transition-duration: .40s;
}
.post img:hover {
opacity: 1.0;
}

Salve e daí todas as imagens das postagens ficarão com o efeito.

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.