マウスオーバーで前面/シャッフルにサムネイルを表示しますか？

Question

私は私の知る限り見ることができるように、この Ben Mendelewicz/Comics

のように、前に選択されたサムネイルをもたらし、サムネイルときに、ユーザーマウスを置いたそれらの上のセットを介してシャッフルの効果を作成しようとしている、このサイトは、 JoomlaのプラグインであるxGalleryを使用します。私はJoomlaを使用していない、と私はcss/js/jQを使用してこの効果を複製するために探しています。

誰でも方向を教えてください、または私にこれを行う方法に関するアドバイスをしてもらえますか？

おかげで多くの

Answer 1

ギャラリーは基本的にmouseover上のノードのz-indexを高め、mouseoutでそれをリセットしています。

しかし、多分あなたはCSSのソリューションをチェックアウトしたい：

/* layout */ 
 
.stack { position: relative; } 
 
.stack .item { 
 
    width: 320px; 
 
    height: 240px; 
 
    position: absolute; 
 
} 
 

 
/* and the effect */ 
 
.stack .item { 
 
    z-index: 1; 
 
    transition: z-index 86400s; /*24 hours*/ 
 
} 
 

 
.stack:hover .item { z-index: auto; } 
 
.stack .item:hover { 
 
    z-index: 2; 
 
    transition: z-index 0ms; 
 
}

<div class="stack"> 
 
    <div class="item" style="background: red; top: 0px; left: 0px;"></div> 
 
    <div class="item" style="background: green; top: 50px; left: 20px;"></div> 
 
    <div class="item" style="background: blue; top: 100px; left: 40px;"></div> 
 
    <div class="item" style="background: yellow; top: 150px; left: 60px;"></div> 
 
</div>