document.querySelectorAll(".item").forEach((element) => { element.addEventListener("mousemove", (e) => { const img = e.currentTarget.querySelector("img"); const { x, y, width, height } = e.currentTarget.getBoundingClientRect(); img.style.display = "block"; img.style.transform = `translate(${e.pageX - img.clientWidth / 2 - x}px,${ e.pageY - img.clientHeight / 2 - y }px)`; if ( e.pageX > width + x || e.pageY > height + y || e.pageX < x || e.pageY < y ) { img.style.display = "none"; } }); element.addEventListener("mouseleave", (e) => { const img = e.currentTarget.querySelector("img"); img.style.display = "none"; }); });

 .item { display: block; position: relative; background-color: tomato; } * { padding: 0; margin: 0; } body { padding-top: 50px; } a { text-decoration: none; color: black; font-size: 2rem; } a:active, a:focus, a:hover { cursor: none; } .title { overflow: hidden; max-width: 100%; } .item img { display: none; max-width: 220px; position: absolute; top: 0; left: 0; } .item { margin-top: 20px; background-color: cadetblue; }

 <a class="item" href="#"> <h3 class="title">Title</h3> <img src="https://kulbachny.com/wp-content/uploads/2021/01/jg-cosmos.jpg" /> </a>