title: fadeout text-color (pure-css)
body: <p>I am trying to achieve the effect which can be seen <a href="http://fc05.deviantart.net/fs70/f/2011/353/d/d/googlemusik__google_music___grooveshark_by_illusionmist-d4jkkny.png" rel="nofollow">here</a> in the lower right where the artist name and track title fade out to the right.</p>
  
  <p>My first attempt was creating an overlay image, but this resulted in an ugly edge on the right because the colors would add. (maybe I can substract the images before using them?)
  (<a href="http://s14.postimage.org/6ghvkv019/overflow.png" rel="nofollow">this</a> is how it looks like)</p>
  
  <p>Then I searched for a CSS 3 attribute which is crossbrowser compatible. But I didn't even found a solution that works with all modern browsers.</p>
  
  <p>EDIT: I am not searching for an animation. I want to have a gradient.</p>
  
  <p>This seems to be very difficult to explain. I made a fiddle of how far I got: <a href="http://jsfiddle.net/z7cK2/" rel="nofollow">http://jsfiddle.net/z7cK2/</a></p>
  
  <p>ANSWER: OUCH, nevermind...
  is seemed I just used an old image m(</p>