How can I make the image move from the cursor in different directions when hovering over it?

Question

JavaScript

How can I make the image move away from the cursor when hovering over it? And is it possible to move it if the picture is through the before pseudo-element?

Answer 1

Try the vanilla-tilt library
https://micku7zu.github.io/vanilla-tilt.js/

Answer 2

Use the anime.js library, it's an engine for website animations and doesn't weigh much.

img.addEventListener("mouseover", function() {
   anime({
    targets: '.lion', // селектор твоего элемента
    translateX: function() {
      return anime.random(0, 50); // аnime.js сам сгенерит случайное число от 0 до 50
    },
    translateY: function() {
      return anime.random(0, 50); // аnime.js сам сгенерит случайное число от 0 до 50
    }
});

Or use the parallax.js library