Efeito opacidade nas imagens

Oi pessoal! Hoje vim ensinar o efeito de transparência na imagem. Esse é o efeito que a imagem é opaca, depois quando passa o mouse ela volta ao normal, igual a da imagem do post. Esse efeito é bastante usado e é bem legal.

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

/* Posts
--------------------

2- ABAIXO disso, cole:

.post img {
filter: alpha(opacity:0.5);
KHTMLOpacity: 0.5;
MozOpacity: 0.5;
-khtml-opacity:.50;
-ms-filter:"alpha(opacity=50)";
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}
.post img:hover {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}

3- Visualize, se estiver tudo certo, salve.


Para usar esse efeito em apenas algumas imagens, use o código abaixo:

 <a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="URL-DA-IMAGEM" /></a>

Se não quiser link, é só retirar a parte:  <a href="LINK-AQUI">