Html 悬停的定价列正在其下方移动图像

我让我的列边框在悬停时改变大小。但它移动了我的图像在它们下面的位置。我尝试增加列底部的边距，这样就不会影响图像。但这并不奏效。我还尝试使用z-index属性，但也没有效果。解决此问题的最佳方法是什么

代码笔：

---

这是因为悬停时边框的宽度不同。无论何时应用任何变换，边界都需要保持相同的宽度。技巧是在悬停之前为对象应用透明边框

.plans-price {
  list-style: none;
  border: 10px solid transparent; 
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082); 
}

.plans-price:hover {
  cursor: pointer;
  border: 10px solid #eee;
}

现在，我看到您原来的

计划价格

有1px的边界。您在这里有几个选项：

在对象没有初始边界的情况下使用我的解决方案

保留透明边框的解决方案，但使用1像素的实心镶嵌框阴影和所需的颜色或颜色添加“人造边框”

将初始边框宽度更改为10px

享受：）

.plans-price {
  list-style: none;
  border: 10px solid transparent; 
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082); 
}

.plans-price:hover {
  cursor: pointer;
  border: 10px solid #eee;
}