Question

我正试图让这些盒子悬停在其他人之上......而不是落后。

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

其次..在原始代码中有圆角（如在非底部正方形中看到没有图片）但在我的角落是直角（因为图片具有直角）。有没有办法在代码中纠正它，而不必将所有图像重新保存为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中position: relative课程上的.box

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

添加

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

如何使悬停放大投影浮在其他图片之上？

1 个答案: