La columna de precios de Hoverd está moviendo una imagen debajo de ell

La columna de precios de Hoverd está moviendo una imagen debajo de ella

Tengo los bordes de mi columna que cambian de tamaño cuando se colocan sobre ellos. Pero mueve la posición de mi imagen debajo de ellos. Intenté aumentar el margen inferior de las columnas para que no afecte la imagen. Pero eso no funcionó. También intenté usar la propiedad z-index, pero tampoco tuvo efecto. ¿Cuál es la mejor manera de solucionar este problema?

Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ

.plans-col {
  width: 33.33%;
  float: left;
  padding: 10px;
  margin-bottom: 40px;
  text-align: center;
}

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

.plans-price .title {
  margin: 50px 0;
}
Mostrar la mejor respuesta

Es debido a un borde que tiene un ancho diferente cuando pasas el cursor por encima. Siempre que esté aplicando cualquier transformación, los bordes deben permanecer del mismo ancho. El truco consiste en aplicar el borde transparente al objeto antes de pasar el cursor.

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

Ahora, he visto que su plans-price original tenía un borde de 1px. Tienes algunas opciones aquí:

  1. usa mi solución donde el objeto no tiene borde inicial,
  2. mantengo mi solución para el borde transparente pero agrego un 'borde falso' usando una sombra de cuadro insertada sólida de 1 px y el color deseado o
  3. cambiar el ancho del borde inicial a 10px

Disfrútalo :)