html - 带有出现文字的css3图片动画

Question

我正在尝试使用纯 CSS3 使图片褪色并在图片上出现一些文本。我从这里开始基本的褪色:http://css3.bradshawenterprises.com/cfimg1/ 现在我要做的是，当我将鼠标悬停在图片上时，不仅会出现另一张图片，还会出现一些包含可点击链接(例如下载链接)的文本。第一个问题是文本出现在 div 之外，我可以通过添加以下内容来解决这个问题:

.crossfade h1 {
position: absolute;
}

我使用 h1，因为段落根本不出现。所以在此之后，我得到了正确的淡入淡出，甚至文本也在它的位置，但它不可选择且不可点击，它看起来像是图像的一部分。

到目前为止，这是我的代码(还有 html 和 css 部分):

<div class="crossfade">
    <img class="bottom" src="pics\hover.jpg" />
    <h1>Title</h1>
    <img class="top" src="pics\23.jpg" />
</div>

.crossfade {
    position:relative;
    height:200px;
    width:200px;
    margin:0 auto;  
}
.crossfade img {
    position:absolute;
    left: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;   
    transition: opacity 0.2s ease-in-out;
}

.crossfade img.top:hover {
    opacity: 0;
}

.crossfade h1 {
    position: absolute;
}

如有任何帮助或想法，我们将不胜感激。 提前致谢。

Answer 1

http://jsfiddle.net/3tkWj/5/

我刚刚添加了另一个 :hover 和 z-index。

.crossfade img.top:hover, .crossfade p:hover+img {
    opacity: 0;
}

编辑:这是您想要的工作示例(请参阅评论)

http://jsfiddle.net/3tkWj/12/

当心，我修剪了 CSS。