Efeito Opacity - Transparência na Imagem

A propriedade Opacity, permite que você aplique um efeito de transparência em uma imagem quando passamos o mouse em cima dela.
Você pode aplicar este efeito de diferentes maneiras:

1) Aplicar em todas e quaisquer imagens publicadas nas postagens - para este efeito é necessário aplicar o estilo da propriedade opacity no CSS do seu template, para que o efeito seja reconhecido e se aplique automaticamente.

2) Aplicar apenas em determinadas imagens - cada vez que quiser adicionar transparência em alguma imagem é necessário que você aplique as propriedades a cada imagem, separadamente.

Imagem 1:

Imagem 2:

1. Aplicando transparência à todas as imagens nos posts:

Este efeito é igual ao aplicado no Template Goth Red Black, onde o efeito se aplica à todas as imagens publicadas nas postagem. Note que a aplicação deste efeito é feita de forma automática. A imagem se apresenta opaca, e quando passamos o mouse em cima ela fica mais forte(imagem 1).

Vá em "Editar HTML" , não precisa clicar em "Expandir modelos de widgets", e procure por:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

E SUBSTITUA tudo por:

.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;
}

Caso queira aplicar o efeito da imagem 2:

SUBSTITUA por:

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

2. Aplicando transparência apenas em determinadas imagens:

Cada vez que quiser adicionar transparência em alguma imagem é necessário que você aplique as propriedades a cada imagem, separadamente.


Imagem Linkada - (passe o mouse)



Para aplicar este efeito, utilize este código:

<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="ENDEREÇO-DA-IMAGEM" /></a>

Use sua criatividade, aplicando este efeito em icones, imagens, botões etc.