Debes usar algo que se llama "transform" y "transition". Ambos son incluídos en el elemento y en el estado "activador" de dicho elemento, que en tu caso es: hover.
Transition tiene algunas propiedades que son importantes e incluyen el comportamiento de la animación en general.
- Nombre de una propiedad CSS para que tu animación pueda ejecutarse propiamente
- Duración de la animación
- Ajustes de sincronización
- Retrasos, si es que tu animación debierá tardarse unos segundos antes de correrse
Esta es la ruta sugerida: transform: propiedad-css, duración, sincronización y retraso
Ejemplo: transform: 300ms ease-in-out 1s;
Desglose de ejemplo:
Esta animación toma la propiedad css "transform", tendrá una duración de 300ms, se sincroniza con la propiedad "ease-in-out", que en otras palabras hace que tenga una suavidad al entrar y salir y tiene un retraso de 1 segundo.
Transform es capaz de modificar tu elemento, esto varía mucho en lo que se desee hacer. Puedes modificar aquí las coordenadas que parece es lo que deseas lograr. Esto lo inidcas en tu propiedad de hover pues es como tu animación cobrará vida.
Algunos de las opciones incluidas son: rotar, escalar, trasladar y torcer. Para tu situación sugeriría un "translate" (traslado) para que se pueda mover de un lado a otro.
Ejemplo: transform: translate(200px, 150px) rotate(20deg);
Desglose de ejemplo:
En esta propiedad vemos que el traslado es de 200 pixeles (de izquierda a derecha) y 150 pixeles (de arriba hacia abajo) y una rotación de 20 grados.
Ya que es muy probable que tu situación sea única, te dejo un ejemplo muy simple que pude recuperar de la web para que puedas tener un ejemplo funcional a la mano. Saludos!
body {
padding: 50px;
}
.trigger {
width: 200px;
height: 200px;
border: 20px solid #999;
background: #999;
}
.box {
display: inline-block;
background-color: pink;
width: 200px;
height: 200px;
transition: transform 300ms ease-in-out;
pointer-events: none;
}
.trigger:hover .box {
trasnform: traslate(200px, 150px) rotate(20deg);
}