css - 如何使 hover enlarge drop shadow float 在其他图片上方？

Question

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

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

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

这是从这里获得的 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 类上的 position: relative

第二——如果你想让图片圆 Angular

添加

img {
border-radius : 54px;
}

并从 .box 类中移除 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;
    }