Wie mache ich Hover vergrößere Schlagschatten Float über anderen Bildern?

Question

Ich versuche, diese Boxen auf Schwebeflug über die anderen zu schweben .. nicht dahinter.

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

Zweitens .. im ursprünglichen Code gibt es abgerundete Ecken (wie in ganz unten Platz gesehen w/ohne Bild), aber in meinen die Ecken rechtwinklig sind (weil das Bild rechten Winkel hat). Irgendeine Möglichkeit, das im Code zu korrigieren, ohne alle Bilder als png mit transparenten abgerundeten Ecken wieder zu speichern? (Wenn das auch funktionieren würde) Und ironischerweise, wie Sie in der Probe sehen können, erscheint die letzte "leere" Box über den anderen Bildern, so wie ich es möchte.

Hier ist der CSS-Code als von hier bekommen: 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

Erste - Wenn Sie die Boxen wollen über andere schweben, die Sie position: relative auf .box Klasse in Ihrem css

Second entfernen müssen - Wenn das Bild abgerundet werden soll

hinzufügen

img { 
border-radius : 54px; 
} 

und border-radius von .box Klasse

Dies wäre Ihre endgültige 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; 
    }