How To Fade A Div's Content Out At The End Of The Element?

I have a div with stuff in it on a page with a background gradient. Now towards the right, I would like to fade that div out to the background: I have tried using background gradi

Solution 1:

I suggest creating a transparent .png image and applying it as a background on top of the div with text by creating a class with absolute positioning.

.transparent {background: url("xxxxxx.png") repeat-y 00 transparent; position:absolute; top:0; right:0; z-index:1;}

Hope this helps.

Solution 2:

A transparent (rgba) gradient in a separate DIV positioned absolutely on top of the original div should do the trick.

Caveat: Absolute positioning may not be feasible, depeding on your layout.