Originariamente inviato da fcaldera
se dentro il link hai solo un immagine allora potresti usare l'opacity in modo da creare l'effetto sbiadito

a img {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
a:hover img {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

se invece hai anche del testo del testo ti conviene usare la soluzione che giù usi: aggiungere una png trasparente sovrapposta che sparisce allo stato hover mi sembra una complicazione

Se il tuo problema era quello di ridurre il numero di immagini, anzichè farne due per ciascun link, ne fai una sola che abbia entrambi gli stati (acceso e spento) e poi utilizzi opportunamente la proprietà background-position per visualizzare la sezione di immagine che ti serve
grazie delle dritte. il problema non è il numero di immagini, ma semplificare il lavoro di duplicazione delle stesse, o eliminare la creazione di immigini uniche da spostare. Non ho del testo dentro l'immagine quindi posso fare ciò che voglio, ma opacity è ben supportata su tutti i browser??