<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<img src="https://picsum.photos/id/237/300/100" alt="">
<img src="https://picsum.photos/id/238/300/100" alt="">
<img src="https://picsum.photos/id/239/300/100" alt="">
body {
  margin: 0;
  min-height: 100vh;
}
body > img {
  display: block;
  width: 100%;
}
body > img {
  margin-left: -100%;
  transition: margin-left 0.3s;
}
body > img:nth-of-type(2) {
  transition: margin-left 0.3s 0.1s;
}
body > img:nth-of-type(3) {
  transition: margin-left 0.3s 0.2s;
}
body.active > img {
  margin-left: 0%;
}

console.clear();

$("body").mouseenter(function () {
  $("body").addClass("active");
});
$("body").mouseleave(function () {
  $("body").removeClass("active");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.