Несимметричное дейтсвите элемента при уведении курсора с элемента?

Question

[Джон Голт]

Есть элемент .element, на который если навести, то с элементом .element-2 происходит следующее:

.element:hover element-2{
   transform: translate(-50px, 0);
}

Соответственно, когда курсор уводится с элемента .element, то происходит симметричное действие и элемент .element-2 возвращается в исходное положение ( в данном случае, пусть это будет translate(0, 0).
И так вопрос: как при помощи css и jQuery (наверное, не сильно шарю, по этому и задаю вопрос здесь) реализовать так, чтобы когда курсор отводился от главного элемента, с анимированным элементом происходила уже другая анимация, например:
transform: translate(-75px, 0);

Answer 1

[MhMadHamster]

codepen.io/anon/pen/KpeXvb