动画块元素以“淡出”另一个元素

时间:2016-07-20 16:44:09

标签: css css3 animation

我有一些重叠的图像链接,并且在悬停时我希望悬停的图像显示在其余部分之上。

在悬停时更改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以使其更具可伸缩性。

http://codepen.io/tenold/pen/qNoNkb

3 个答案:

答案 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)

这样的东西?

&#13;
&#13;
.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;
&#13;
&#13;