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进行了尝试。

带有出现文本的Css3图片动画

1 个答案: