#CSS {float:left; height:64px; width:64px; padding: 0; background: url(images/siyahbeyaz.png) no-repeat scroll center center; }

#CSS:hover {float:left; height:64px; width:64px; padding: 0; background: url(images/renkli.png) no-repeat scroll center center; }

Genişlik v.s kendiniz ayarlarısınız.

Burdaki mantık, renkli.png adlı resminizi photoshop'ta sihay-beyaz yapıyorsunuz. Div'in arka planına bu bu resmi atıyorsunuz. Mause ile üzerine gelince de resmin orjinal renkli olanını gösteriyorsunuz.