Animate image same position

by lemon kazi

HTML

<div class="preview-ui ">
  <img src="https://assets-global.website-files.com/60b9220d74f790a1191230c9/614d9a7c49204f3497bec8d1_s-feedback-friday.png" loading="lazy" width="584" alt="" class="preview-ui-image">
  <div class="mouse_movement">
    <div class="image_animate first-part upside_down ">
      <img src="https://assets-global.website-files.com/60b9220d74f790a1191230c9/6167eb99b5923e265a6c5146_ff-1.png" loading="lazy" width="69" alt="" class="up">
    </div>

    <div class="image_animate second-part ">
      <img src="https://assets-global.website-files.com/60b9220d74f790a1191230c9/6167eb997e14e118569efb42_ff-2.png" loading="lazy" width="69" alt="" class="up">
    </div>

    <div class="image_animate upside_down third-part ">
      <img src="https://assets-global.website-files.com/60b9220d74f790a1191230c9/6167eb990935c979e4c0570f_ff-3.png" loading="lazy" width="69" alt="" class="up">
    </div>

    <div class="image_animate fourth-part ">
      <img src="https://assets-global.website-files.com/60b9220d74f790a1191230c9/6167eb9ada1824ba1217c024_ff-4.png" loading="lazy" width="69" alt="" class="up">
    </div>

    <div class="image_animate upside_down fifth-part ">
      <img src="https://assets-global.website-files.com/60b9220d74f790a1191230c9/6167eb9a76d7a921a59e6e1a_ff-5.png" loading="lazy" width="69" alt="" class="up">
    </div>

    <div class="image_animate sixth-part ">
      <img src="https://assets-global.website-files.com/60b9220d74f790a1191230c9/6167eb9a236bd3f1325e3c8f_ff-7.png" loading="lazy" width="69" alt="" class="up">
    </div>

  </div>
</div>

CSS

.preview-ui {
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;

}

.preview-ui-image {
  border-radius: 25px;
  width: 70%;
  margin: 0 auto;

}


.image_animate {
  width: 16%;
  height: 22%;
  will-change: transform;
  background: transparent;
  position: absolute;
  top: 4%;
  left: 8%;
  animation: grow-shrink 1.5s infinite alternate;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 10;
}

.image_animate.upside_down {

  animation: shrink-grow 1.5s infinite alternate;

}

.image_animate img {
  width: 100%;
}

.first-part {
  width: 11%;
  height: 18%;
  top: 3%;
  left: 1%;
}

.second-part {
  width: 10%;
  height: 22%;
  top: -2%;
  left: 78%;
}

.third-part {
  width: 39%;
  height: 22%;
  top: 4%;
  left: 59%;
}

.fourth-part {
  width: 23%;
  height: 22%;
  top: 9%;
  left: 8%;
}

.fifth-part {
  width: 16%;
  height: 22%;
  top: 39%;
  left: 79%;
}

.sixth-part {
  width: 16%;
  height: 22%;
  top: 63%;
  left: 8%;
}

@keyframes grow-shrink {
  0% {
    transform: translate3d(0px, -5%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)
  }

  100% {
    transform: translate3d(0px, 5%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)
  }
}

@keyframes shrink-grow {
  0% {
    transform: translate3d(0px, 5%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)
  }

  100% {
    transform: translate3d(0px, -5%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg)
  }
}


.mouse_movement {

  will-change: transform;
  --translate-x: 0px;
  --translate-y: 0px;
  transform: translate3d(0px, 0px, 0px);
  /* transform-style: preserve-3d; */
  /* backface-visibility: hidden; */
  position: relative;
  display: block;
  left: 0px;
  top: 0px;
  position: absolute;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: 100%;



}

JavaScript

jQuery(document).ready(function($) {

  //const cursor = document.getElementById("cursor");
  var mouse_movement = document.getElementsByClassName('mouse_movement');



  const moveCursor = event => {
    const setWidth = mouse_movement[0].getBoundingClientRect().width / 2;
    const aaa = event.clientX / 100;


    mouse_movement[0].style.setProperty('transform', "translate3d(" + (event.clientX / 100) + "px, " + (event.clientY / 100) + "px, 0px)");



  }
  document.addEventListener("mousemove", moveCursor);

});