如何使 hover enlarge drop shadow 浮动在其他图片上方？

Question

我试图让悬停时的这些框漂浮在其他框之上..而不是落后。

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

其次..在原始代码中有圆角（如最底部正方形所示，没有图片）但在我的代码中，角是直角（因为图片有直角）。有什么方法可以在代码中更正它而不必将所有图像重新保存为具有透明圆角的 png？（如果这也行得通的话）具有讽刺意味的是，正如您在示例中看到的那样，最后一个 'empty' 框弹出在其他图像上方，因为我希望它们都这样做。

这是从此处获得的 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 class 上的 position: relative

第二 - 如果你想让图片圆角

添加

img {
border-radius : 54px;
}

并从 .box class

中删除 border-radius

这将是你最后的 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;
    }

如何使 hover enlarge drop shadow 浮动在其他图片上方？

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

css

hover

image-enlarge