lo puedes solucionar usando javascript, te proporciono el código
// JavaScript
const contenedor = document.querySelector('.contenedor');
contenedor.addEventListener('mouseover', () => {
contenedor.style.transform = 'translateX(300px)';
contenedor.style.backgroundColor = 'red';
});
Con CSS es imposible lograr el efecto que tu quieres, ya que el hover en css trabaja de esa manera ("siempre regresa a su posición original").
Pero con Javascript puedes lograr el efecto que quiereslograrlo con el -> listener "mouseover".
Es más, te voy a proporcionar el siguiente código que va hacer que el elemento regrese a su posición original para que puedas diferenciar como funcionan los "listeners".
contenedor.addEventListener('mouseout', () => {
contenedor.style.transform = 'translateX(-100px)';
contenedor.style.backgroundColor = 'purple';
});
Si no llegas a colocar el útlimo fragmento de código que te proporcioné, el elemento se quedará a la derecha.