根据图像的高度更改不透明度

Is there a way in CSS or javascript or jquery that opacity of a single image can be changed along with its height. Like lets say I have an image 10px tall, I want the bottom 1px to be invisible so opacity would be 0, and second last pixel would be 0.1, and gradually increasing to opacity 1 for the uppermost pixel. This kind of gradual opacity should give a reflection kind of appearance which is what I am trying to achieve. I have researched and tried and all my research has not proven of any help. Help would be appreciated. I am tagging javascript and jquery as well as I am not sure if it can be achieved using css3 only.Is there a way in CSS or javascript or jquery t