Check out the repository link here: https://codepen.io/Jaycethanks/pen/WNJqdWB
I am trying to achieve a parallax effect on the body and image container, as well as a scale-up effect on images when hovered over. However, the hover functionality is not working as expected. The body has an event listener attached.
<body>
<div class="box">
<div class="inner-box">
<!-- prettier-ignore -->
<div class="items-wrapper">
<div class="box-item">
<img src:'xxx'/>
.......
.box-item:hover {
transform: scale(1.5) translateZ(50px);
transition: 0.1s all ease;
}
body.addEventListener("mousemove", (e) => {
const { pageX, pageY } = e;
setPointerPosition(pageX, pageY);
const [xCent, yCent] = computedPointerPositionPercent(pageX, pageY, 12);
// 50 is based on background-position: 50% 50% for changes
body.style.backgroundPosition = `${xCent + 50}% ${yCent + 50}%`;
});