Achei este efeito na net, como não achei novamente, o refiz aqui, mas gostaria de saber dos experts na área as vantagens ou desvantagens do mesmo método ok?!?!

Método consiste em mover uma imagem "inteiriça" como background em uma div.

ou seja, quero fazer um botão de um ícone que tem 128 de altura e 128 de largura,


e quero que quando o mouse estiver em cima a imagem fique mais clara. Normalmente, javascript + photoshop resolveria isto, mas agora faço assim:

no Photoshop crio uma imagem com o dobro de largura, ou seja, uma imagem com 128 de altura e 256 de largura, e coloco duas imagens nela, a original do lado esquerdo e a mais clara do lado direito.





No css ficaria assim:




e no html assim:



desta forma, qdo o mouse se posicionar em cima da imagem, o background iria mover para esquerda 128px, fazendo com que a imagem clara apareça.



não se esqueçam que gostaria de saber de vcs que manjam quais vantagens e desvantagens do método.

PS: testei apenas no firefox 2

PS2: com mais tempo, coloco a página funcionado aqui como exemplo tb.