How to make a draggable image appear on link hover? Just like in this website
I am using React, so if it works with a library, i will be happy to take recommendations
You must present what you have done till now, so we can help. consider this for your next questions. Btw you can use something like this:
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>