How do you apply a fading overlay to an image in CSS?

Question

I have an image inside a div. For example's sake, let's say this div has a background-color of #000. Now, I want this image to fade from the left, to the right.

What I mean is, the first column of pixels should appear to have 100% opacity, whilst the final column of pixels should appear to have 0/1% opacity (the final column of pixels will blend in with the background of the div).

How would I do this purely in CSS? The image will always be 50x50.

Answer 1

you could overlay div on top of an image and set gradient for div http://tinkerbin.com/xXJQrgnk