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