css - 动画 block 元素到 "fade above"另一个

Question

我有一些重叠的图像链接，悬停时我希望悬停的那个显示在其余图像的上方。

只需更改鼠标悬停时的 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>

代码笔:http://codepen.io/tenold/pen/dXmXyX

更新

万一其他人来这里寻找这个答案，这就是我最终做的，基于下面史蒂夫 R 的回答。我添加了一些 javascript 以使其更具可扩展性。

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

Answer 1

一个选项是为您的第一张图片使用两个元素，一个在第二张图片的“后面”和一个“前面”。将“正面”图像的不透明度设置为 0，并在悬停时将该属性设置为 1。请参阅:http://codepen.io/slrubinstein/pen/EyEyya

#front {
  position: absolute;
  opacity: 0;
  transition: opacity .5s;
}

#front:hover {
  opacity: 1;
}