如何讓懸停放大其他圖片上方的拖放陰影浮動？

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