Well it may be two images but it’s in one file :). AFAIK there is no way just to give some sort of gray overlap to the image. The best bet would just to be to have that 2nd image in the file and reference that (as done in the above link/code :).
If you don’t want to load another image and provide for more advanced users, you could create a div with a higher z-index that is semi-transparent and a color of black. Upon hover, set it to display:none; and that would be a quick fix that would load a fraction of the image atm.