Efeito opacidade nas imagens

Oi cherries! Tutorial para vocês hoje!

Vocês já devem ter visto em alguns blogs e aqui no cherry bomb, um efeito nas imagens que deixa elas mais opacas ou transparentes, e quando passa o mouse fica normal. Para entender melhor, veja um exemplo:

Vou ensinar para vocês usando o código do MadlyLuv, que foi o que eu achei mais simples e funcional.

Vamos começar? Então abra o seu blog, e vá no HTMl dele. Aperte Ctrl+F e procure por ]]></b:skin>

Cole Antes de ]]></b:skin> o código abaixo:

/****** opacidade - MADLYLUV.COM ******/
.opacidade
{filter:alpha(opacity=82);
-moz-opacity:0.82;
opacity:0.82;}

.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;}

Salve as alterações.

Quando quiser deixar uma imagem com esse efeito, é só acrescentar class="opacidade" no código na imagem, vai ficar assim:

<img src="http://i55.tinypic.com/t7nxuf.jpg" class="opacidade"/>

Simples não? Espero que tenham gostado, Kissus.