Text disappear in gradient - text

Question

I would like the text to disappear in a gradient, like in the image I link to below, and on hover the gradient would disappear.
What I want:
http://s7.postimg.org/59m1vxfwr/screen.png
The best thing would be if I could use the background gradient in CSS, but I have no idea have to get it 'above' the text.
Heres a jsfiddle to what I have right now, with a gradient (yellow for now, but I want white) thats under everything.
http://jsfiddle.net/RxLfV/1/
HTML:
<section class="thework">
<a href="<?php the_permalink(); ?>">
<div class="thetitle">
Test 1
</div>
<div class="thedescription">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</a>
</section>
<section class="thework">
<a href="<?php the_permalink(); ?>">
<div class="thetitle">
Test 2
</div>
<div class="thedescription">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
</div>
</a>
</section>
<section class="thework">
<a href="<?php the_permalink(); ?>">
<div class="thetitle">
Test 3
</div>
<div class="thedescription">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</a>
</section>
CSS:
.thework a {
width: 100%;
float: left;
display: block;
font-size: 1em;
font-family: sans-serif;
color: black;
background: -moz-linear-gradient(top, rgba(255,242,0,0) 0%, rgba(255,242,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,242,0,0)), color-stop(100%,rgba(255,242,0,1)));
background: -webkit-linear-gradient(top, rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
background: -o-linear-gradient(top, rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
background: -ms-linear-gradient(top, rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
background: linear-gradient(to bottom, rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fff200', endColorstr='#fff200',GradientType=0 );
}
.thework a:hover {
background: none;
}
.thetitle {
width: 25%;
left: 25%;
margin-top: 2em;
margin-bottom: 2em;
float: left;
position: relative;
}
.thedescription {
width: 50%;
left: 25%;
margin-top: 2em;
margin-bottom: 2em;
float: left;
position: relative;
}
Does anybody know how to get it above?
A image would work also, as long as it align in the bottom – the text will be of different heights.
Thanks in advance!

Answer 1

You could overlay a div on top of your current div. The overlay div would contain the gradient background.
DEMO http://jsfiddle.net/kevinPHPkevin/6k3vV/54/
.fadeout {
position: absolute;
bottom: 0em;
width:100%;
height: 4em;
background: -webkit-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
section {position:relative}