Efeito esmaecer com CSS

Um blog só tem futuro se possuir conteúdo relevante, no entanto um bom design atrai muitos outros usuários. Eu mesmo já favoritei vários blogs só por causa de seu layout e design.

O efeito esmaecer, é um recurso bonito aplicável com poucas linhas de código css. Esmaecer significa desbotar, perder a cor, enfraquecer.

Este efeito é ótimo para menus como listas de redes sociais, pois torna mais fácil a visualização da imagem em mouseover (selecionada).

No exemplo acima, as tags img (imagens) possuem a classe bandeira, e devem ser links. Veja como ficou o código HTML:

<div style="text-align:center;">
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="esmaecer" style="margin-right:4px;" /></a>
</div>

O código CSS ficaria então assim:

.esmaecer:hover {
  filter:alpha(opacity=30);
  -moz-opacity: 0.30;
  opacity: 0.30;
}

Simples, bastou inserir a classe esmaecer a sua css. Você tambem pode inverter a ordem, deixando as imagens por padrão esmaecidas, o código css ficaria assim:

.desmaecer {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;}

.desmaecer:hover {filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
}

Muito simples, veja o exemplo abaixo e seu respectivo código:

<div style="text-align:center;">
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
<a href="#"><img src="endereçourldaimagem" class="desmaecer" style="margin-right:4px;" /></a>
</div>

pode-se aumentar ou reduzir os graus de esmaecimento da seguinte forma:

O valor da propriedade filter:alpha(opacity=xx); varia de 100(normal) à 00 (transparente).

O valor da propriedade -moz-opacity:xx; varia de 1 (normal) à 0.0 (transparente).

O valor da propriedade opacity: xx; varia de 1 (normal) à 0.0 (transparente).

Os valores em vermelho acima devem ser substituídos pelos valores entre as faixas acima estabelecidos.