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