Как избежать дергания элемента при transform?

Question

[kode_krendel]

Пример проблемы хорошо виден на диве номер 3 - codepen.io/kodekrendel/pen/ryVpqr

Когда я подвожу мышку к нижнему краю элемента и немного провожу ею, то этот див, выходя за пределы курсора мышки благодря transform, начинает дергатся. Как в таких случаях реализовывают такие эффекты на hover?

Comments

[justdealman]

Добавить ховерабл обертку и анимировать вложенный элемент?

[kode_krendel]

justdealman: да, внизу уже подсказали, это выход, спасибо.

Answer 1

[Михаил]

Можно сделать обертку, например так

Comments

[kode_krendel]

Ну что ж, это выход :) Спасибо.

Answer 2

[Иван Татауш]

Можно добавить родителя. Пример

Comments

[kode_krendel]

Спасибо, пойдет хак :)

Answer 3

[Sam Bulatov]

что бы было все плавно надо использовать transition

Comments

[Sam Bulatov]

А да, такие вещи зачастую еще делают через js, но я могу ошибаться

[kode_krendel]

Дело не в плавности, а в том, что элемент, выходя из-под курсора возвращается обратно, если им двигать.

[kode_krendel]

Я разве спрашивал о плавности вообще?

[kode_krendel]

Да ну, какой еще js, сместить на 20px элемент? Еще jQ для этого посоветуйте мне подключить, для полной картинки. Вы ошибаетесь, потому что даже не поняли что я спрашивал.

[Sam Bulatov]

kode_krendel: извини, думаю можно через js, там проще

[kode_krendel]

Sam Bulatov: менять значения translate на mouseover?