Text 文本在渐变中消失

我希望文本在渐变中消失，就像在我链接到下面的图像中一样，悬停时渐变将消失

我想要的是：

最好的办法是，如果我能在CSS中使用背景渐变，但我不知道必须让它“高于”文本

这是我现在所拥有的东西的一个缩影，在所有的东西下面都有一个渐变（现在是黄色，但我想要白色）。

HTML:

有人知道怎么把它弄到上面吗？ 图像也可以工作，只要它在底部对齐-文本的高度不同

---

提前谢谢

您可以在当前div的顶部覆盖一个div。覆盖div将包含渐变背景

演示

---

效果非常好。非常感谢你！没问题，很乐意帮忙。如果你需要帮助，可以在推特上关注我。我们有几个人在那里帮忙。我是

@kpldesigns

<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>

.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;
}

.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}