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 lograrlo 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.