我有一些重叠的图像链接,并且在悬停时我希望悬停的图像显示在其余部分之上。
在悬停时更改z-index很容易,并使其显示在其余部分之上。但我在这里寻找一些更流畅的动画。我不认为有一种方法可以在CSS中为z-index设置动画,但是在这里我还缺少一些其他的不透明技巧,这可能会使这些链接看起来像是在“淡化”其他链接吗?
<div class="block-links">
<a href="#" style="background-image:url(http://placekitten.com/400);"></a>
<a href="#" style="background-image:url(http://placekitten.com/500);"></a>
</div>
Codepen:http://codepen.io/tenold/pen/dXmXyX
更新
如果有其他人来这里寻找这个答案,这就是我最终做的,基于Steve R的答案。我添加了一些javascript以使其更具可伸缩性。
答案 0 :(得分:1)
一种选择是为第一张图片使用两个元素,第二张图片使用一个“后面”和一个“前面”。将“前”图像的不透明度设置为0,并在悬停时将该属性设置为1。请参阅:http://codepen.io/slrubinstein/pen/EyEyya
#front {
position: absolute;
opacity: 0;
transition: opacity .5s;
}
#front:hover {
opacity: 1;
}
答案 1 :(得分:-1)
使用CSS3过渡属性。只需将.fade类添加到要淡化的任何对象。
.fade {
opacity: 0.5;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
z-index: 10;
}
.fade:hover {
opacity: 1.0;
z-index: 1000;
}
答案 2 :(得分:-1)
这样的东西?
.block-links {
position: relative;
}
a {
float:left;
display: block;
position: relative;
width:200px;
height:200px;
background-size:cover;
background-position:center center;
z-index: 0;
opacity: 1;
}
a:last-child {
top:50px;
left:-50px;
}
a:hover {
z-index: 2;
animation: fade 1.6s ease;
}
@keyframes fade {
33% { opacity: 0 }
100% { opacity: 1 }
}
&#13;
<div class="block-links">
<a href="#" style="background-image:url(http://placekitten.com/400);"></a>
<a href="#" style="background-image:url(http://placekitten.com/500);"></a>
</div>
&#13;