Q:

Mover imagem ao passar o mouse sobre ela

Gostaria de ajuda em um estudo que estou realizando. 
Como posso mover uma imagem, em sentido aleatório e de forma dinâmica, ao passar o mouse sobre ela?  Gostaria de uma linha de raciocínio para chegar a uma solução nos meus futuros problemas. 
Fiz curso de JavaScript e adquirir muito conhecimento, porém, na hora de aplicá-lo, fico preso ao problema. 
Poderiam guiar-me neste exemplo? 

A:

//variável que verificará se o mouse está sobre a imagem
let hover = false;

//Função que moverá a imagem
function move(element) {
  //Muda as propriedades top e left da imagem
  element.style.top = `${Math.random() * (10 - (-10)) + (-10) + Number(element.style.top.replace('px', ''))}px`;
  element.style.left = `${Math.random() * (10 - (-10)) + (-10) + Number(element.style.left.replace('px', ''))}px`;
  
  //Math.random() * (10 - (-10)) + (-10)
  //Número aleatório entre -10 e 10
  
  //Number(element.style.top/left.replace('px', ''))
  //A posição atual da propriedade top/left como um número

  //Se o mouse ainda está sobre a imagem
  if (hover) {
    //Chama a função move novamente em meio segundo
    setTimeout(() => move(element), 500);
  }
}

//O elemento imagem
const image = document.querySelector('img');

//Quando o mouse ficar sobre a imagem
image.addEventListener('mouseover', function(event) {
  //Altera a variável hover
  hover = true;

  //Move a imagem
  move(image);
});

//Quando o mouse sair da imagem
image.addEventListener('mouseout', function(event) {
  //Altera a variável hover
  hover = false;
});
img {
  position: absolute;
  top: 0px;
  left: 0px;
  transition: top 0.5s linear, left 0.5s linear; 
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdmLKDoD_jt79twxzn55JzrJDaHpkpl8bvarPloOFOsy4eLDA3" alt="Exemplo">

