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>

ISHIDA · Accepted Answer · 2017-06-23T17:42:55.527

2

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

edited Jun 23 '17 at 17:42

answered Jun 23 '17 at 17:26

ISHIDA

4,700
2
16
30

Thank you! The hover/float now works perfectly! The right angle of the image is still showing 'thru' rounded corners of the css. See updated link: http://sallydrennon.com/xnew/garbage.html – Marc Jun 23 '17 at 17:37
You want the box to be round cornered ? and on hover it has to be round cornered correct ? – ISHIDA Jun 23 '17 at 17:40
If you want the box to be round cornered can you add `box-radius:5px` to `.box` class. I have updated my answer. That should fix it. – ISHIDA Jun 23 '17 at 17:43
1

MAGIC! Thank you! – Marc Jun 23 '17 at 17:57

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

1 Answers1