如何让悬停放大其他图片上方的拖放阴影浮动？

Question

我试图让这些盒子悬停在其他人的上方..不在后面。

http://sallydrennon.com/xnew/garbage.html

其次..在原始代码中有圆角（如在最底部平方看出瓦特/无图像），但在矿井的角是直角（因为图像具有直角）。任何方式纠正在代码中，而不必重新保存所有的图像为PNG透明的圆角？ （如果即使这样也会奏效）具有讽刺意味的是，正如你在样本中看到的那样，最后一个“空”框会弹出其他图像上方，因为我希望它们都做。

下面是从这里得到的CSS代码：http://tobiasahlin.com/blog/how-to-animate-box-shadow/

<style type="text/css"> 

.box { 
    position: relative; 
    display: inline-block; 
    width: 225px; 
    height: 225px; 
    background-color: #fff; 
    border-radius: 5px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    border-radius: 5px; 
    -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 

.box::after { 
    content: ""; 
    border-radius: 5px; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    opacity: 0; 
    -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 

.box:hover { 
    -webkit-transform: scale(2, 2); 
    transform: scale(2, 2); 
} 

.box:hover::after { 
    opacity: 1; 
} 

</style> 

Answer 1

首先 - 如果你想的箱子悬停一个以上其他的你需要在你的CSS

二上.box类中删除position: relative - 如果你想要图像圆角

add

img { 
border-radius : 54px; 
} 

和.box类

删除边框半径这将是你最后的CSS

.box { 
    display: inline-block; 
    width: 225px; 
    height: 225px; 
    background-color: #fff; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    border-radius: 5px; 
    -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 

img { 
    border-radius : 54px; 
    }