将缩略图放在鼠标悬停的前面/随机播放？

Question

我试图通过创建一组缩略图洗牌的效果，当用户将鼠标放在他们，使所选的缩略图到前面，这样 Ben Mendelewicz/Comics

至于我可以看到，这个网站是使用xGallery这是Joomla的插件。我不使用Joomla，我正在寻找使用css/js/jQ来复制这种效果。

有没有人请指点我的方向或给我一些建议，如何做到这一点？

感谢很多

Answer 1

画廊基本上是提高节点的z-index上mouseover和重置它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>