Estoy tratando de mover cajas hacia arriba cuando simplemente hago un mouseover. Puedo pasar el mouse sobre cada cuadro, pero no puedo moverlo hacia arriba. Aquí está mi código:

body {
  text-align: center;
}
.row {
 padding: 50px 0;
}
.post-item {
 outline: 1px solid red;
 padding: 50px 20px;
 border: 5px solid transparent;
}
.post-item:hover {
 outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
 }

Aquí está mi DEMO EN VIVO

0
progx 9 sep. 2018 a las 17:25

3 respuestas

La mejor respuesta

Debería usar transform de la siguiente manera:

body {
  text-align: center;
}

.row {
  padding: 50px 0;
}

.post-item {
  outline: 1px solid red;
  padding: 50px 20px;
  border: 5px solid transparent;
  transition: all 200ms ease;
}

.post-item:hover {
  outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
  transform: translateY(-3px);
}
0
Omid Nikrah 9 sep. 2018 a las 14:29

Puedes agregar el siguiente código cuando pases el elemento para subir.

  .post-item:hover{transform:translateY(-3%);}
0
G Pandurengan 9 sep. 2018 a las 14:38

Sus ejemplos dados lo hicieron por dos propiedades CSS:

.post-item:hover {
  outline: 0px solid transparent;
  padding: 50px 20px;
  border: 5px solid red;
  transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
  transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}
1
Hanif 9 sep. 2018 a las 14:36