Olá a todos do D.A, venho aqui fazer mais um tutorial de CSS, que eu sou bom.

Bom, o efeito é o seguinte, o avatar do usuário ficará com 0.5 de opacidade, quando você passar o cursor em cima do avatar, ele vai clarear, porque a opacidade vai para 1.0. Bom, vamos lá.

Primeiro de tudo, temos que saber a classe, que é.

Código:

.postprofile dt img{

Agora vamos colocar o efeito de opacidade, sem o cursor estar em cima do avatar.

Código:

.postprofile dt img{
opacity: 0.5;
}

Agora, com o cursor em cima do avatar.

Código:

.postprofile dt img{
opacity: 0.5;
}

Bom, o código já está funcionando, mais não tem um efeito legal, porque ele clareá muito rápido, então vamos adicionar mais algumas coisas no código.

Apenas vamos editar o código sem o cursor.

Código:

.postprofile dt img{
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0.5;
}

Pronto, terminamos o tutorial, aqui está o código pronto para quem tem preguiça da montar...

Código:

.postprofile dt img{
-moz-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0.5;
}
.postprofile dt img:hover{
opacity: 1.0;
}

E aqui está o efeito final.

Sem mouse
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Com mouse
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Créditos: Firenando.
OBS: Podem copiar este tutorial e colocar em outro fórum, mais deixe os créditos e o link do fórum.