Дёргается блок при hover, как исправить?

Question

[Андрей Широких]

Всем доброго времени суток.

Такая беда, создаю блок с картинкой внутри

<div class="container">
 <img class="image_icon">
</div>

На CSS прописал hover на image_icon с анимашкой сдвига вправо. И получается так, что при наведении на левый край image_icon, срабатывает hover, блок сдвигается вправо и если чуть отодвинуть курсор, эффект hover повторяется. Иногда можно поймать курсор на моменте, когда hover срабатывает бесконечно или просто дёргано.
Подскажите, как реализовать hover без этого дёргания?
Сурс на сабж:
https://codepen.io/blackerandrew/pen/jOOrBVw

Comments

[Максим]

Добрый день!
Попробуйте сделать обертку для иконки, по наведению на которую будет двигаться иконка относительно обертки. При этом сама обертка не должна двигаться. Должно сработать

[Андрей Широких]

Максим Черябушкин, Я уже это пробую, но я не знаю как на CSS прописать наведение на один блок, чтоб при этом двигался другой.

[Максим]

BlackerAndrew, примерно так, я думаю)
https://codepen.io/MCheryabushkin/pen/QWWEvxY?edit...

Answer 1

[igumenov]

Происходит потому, что при наведении к примеру на 1й пиксель слева срабатывает ховер, но элемент уходит на 4 пикселя влево и соответственно происходит зацикливание.
Можно исправить делая смещения не transform, а padding
в обычном состоянии padding-left: 0;
hover {padding-left: 4px)
тогда элемент остается всегда на своем месте