出现文字的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;
}

编辑：这是您想要的工作示例（请参阅 cmets）

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

小心，我修剪了 CSS。