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