.mouse-follow-container { position: relative; overflow: hidden; } .mouse-follower { position: absolute; width: 120px; height: 120px; pointer-events: none; transform: translate(-50%, -50%); z-index: 20; opacity: 0; transition: opacity 0.2s ease; } .mouse-follow-container:hover .mouse-follower { opacity: 1; } .mouse-follower img { width: 50%; height: 50%; object-fit: contain; display: block; } .caja-down{height:237px !important} document.addEventListener("DOMContentLoaded", function () { const container = document.querySelector(".mouse-follow-container"); if (!container) return; const follower = document.createElement("div"); follower.className = "mouse-follower"; follower.innerHTML = ''; container.appendChild(follower); let mouseX = 0, mouseY = 0; let currentX = 0, currentY = 0; container.addEventListener("mousemove", function (e) { const rect = container.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; }); function animate() { currentX += (mouseX - currentX) * 0.12; currentY += (mouseY - currentY) * 0.12; follower.style.left = currentX + "px"; follower.style.top = currentY + "px"; requestAnimationFrame(animate); } animate(); container.addEventListener("mouseenter", function () { follower.style.opacity = "1"; }); container.addEventListener("mouseleave", function () { follower.style.opacity = "0"; }); });