Como deixar as imagens opacas

Hoje vamos aprender como deixar as imagens do blogger opacas, esta é uma ótima opção para ajudar no seu layout.

1º Vamos colocar o código que vai deixar a imagen opaca e ao passar o mouse ela fica da cor normal.
Entre em Desing depois em Editar HTML use Ctrl + F e proccure por ]]></b:skin> antes dela adicione o seguinte código:

.opaco {
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;
}
.opaco: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;
}



Salve seu modelo e pronto, agora vamos colocar a tag na imagem.
Quando você quiser que a imagem fique opaca e ao passar o mouse fique da cor normal faça o seguinte ao inserir o código da imagem coloque no linque dela o seguinte código: class="opaco" veja o exemplo:
<a class="opaco" href="LINK-DA-IMAGEM"><img src="LINK-DA-IMAGEM-MENOR" height="150" width="150"></a>

Veja o Exemplo funcionando: Demo


2º Agora para fazer o efeito contrário adicionamos um novo código do mesmo jeito do primeiro.

.opacod {
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:.50;
filter:alpha(opacity=100);
opacity:.1;
}
.opacod:hover {
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;
}


Note que o segundo código é diferente ele será usado para fazer o efeito ao contrário do primeiro, mas vamos usar a tag class="opacod" em vez de class="opaco", veja com fica o código:
<a class="opacod" href="LINK-DA-IMAGEM"><img src="LINK-DA-IMAGEM-MENOR" height="150" width="150"></a>

Veja o Exemplo funcionando: Demo


Caso você queira inserir os dois códigos de uma vez siga o 1º passo e ao vez de inserir o código que está lá em cima insirá este:
.opaco {
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;
}
.opaco: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;
}
.opacod {
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;
}
.opacod:hover {
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;
}