css - How do I make hover enlarge drop shadow float above other pictures?

Question

I'm trying to make these boxes on hover float above the others.. not behind.

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

Secondly.. in the original code there are rounded corners (as seen in the very bottom square w/ no picture) but in mine the corners are right angles (because the picture has right angles). Any way to correct that in code without having to re-save all the images as png with transparent rounded corners? (If even that would work) And ironically as you can see in the sample that last 'empty' box pops up ABOVE the other imges as I want them all to do.

Here's the CSS code as gotten from here: 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

First - If you want the boxes hover one above other you need to remove position: relative on .box class in your css

Second - if you want the image to rounded corners

add

img {
border-radius : 54px;
}

and remove border-radius from .box class

This would be your final 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;
    }