Как исправить slide up?

Question

[Игорь]

При наведении происходят непонятные скачки, как сделать, чтобы их не было?
Также, как сделать, чтобы при убирании курсора все возвращалось обратно плавно, а не резким скачком?
https://codepen.io/4kings/pen/xygeoN

Answer 1

[0xD34F]

При наведении происходят непонятные скачки

Понятные. Изменение положения элемента .box-inner завязано на его же :hover, так что когда он уезжает из-под курсора, состояние :hover теряется, элемент откатывается назад, под курсор, снова случается :hover, элемент опять едет вверх, ну и т.д. Надо смотреть :hover у элемента, который из-под курсора никуда не девается, т.е., у родительского:

.box:hover .box-inner {
  margin-top: -360px;
}

Также, как сделать, чтобы при убирании курсора все возвращалось обратно плавно, а не резким скачком?

Аналогично - transition должен присутствовать у элемента вне зависимости от наличия состояния :hover:

.box-inner {
  transition: all 500ms ease;
}

Answer 2

[skuvaWeb]

Transition нужно задать блоку, а не блоку в состоянии hover. К тому же учитывайте ховер на блок родителя, потому что из-за того что блок уезжает из-под курсора, ховер состояние.

.box:hover .box-inner{
  margin-top:-360px;
  position: relative;
  box-sizing: border-box;
  transition: all 500ms ease;
}
.box-inner{
  transition: all 500ms ease;
}