jquery / css - 堆叠图像，在悬停时带到前/后

Question

我正在寻找一种方法，让一些图像堆叠在一起，鼠标悬停时图像“后面”出现在前面，图像在“前面”向后移动。顶部图像将是100％大小，下面的每个图像比例小10％并偏向侧面，因此有一个区域可以选择它。

像这样的小提琴，除了点击图像时，它们被动画化并被带到前面。

这可能，或者是否已经提供了这个插件？

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;
}