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