jquery/css - 堆叠图像，在悬停时置于前面/后面

Question

我正在寻找一种方法，让一些图像相互堆叠，鼠标悬停时“后面”的图像出现在前面，“前面”的图像出现在后面。顶部图片的大小为 100%，下面的每张图片都缩小了 10% 并向侧面偏移，因此有一个区域可供选择。

类似于这个 fiddle ，除了当单击开始的图像时，它们会被动画化并带到最前面。

这可能吗，或者是否有任何现有的插件已经提供了这个？

Answer 1

你不需要 JS，只需将它添加到你当前的 css。

#box1,
#box2,
#box3,
#box4 {
  1sition: width 1s, height 1s; /* Safari 3.1-6.0 */
  transition: width 1s, height 1s; 
}

#box1:hover,
#box2:hover,
#box3:hover,
#box4:hover {
  position: absolute;
  z-index: 1;
  width: 500px;
  height: 500px;
}