참고
https://youtu.be/flOx9Jis938?si=qJRpGtS2Ysq71NMF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom In Zoom Out</title>
</head>
<style>
body
{
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
min-height: 100vh;
}
#container
{
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
height: 500px;
width: 500px;
overflow: hidden;
}
img
{
transform-origin: center;
object-fit: cover;
height: 100%;
width: 100%;
}
</style>
<body>
<div id="container">
<img src="img.jpg" alt="">
</div>
</body>
<script>
const container = document.getElementById('container');
const img = document.querySelector('img');
container.addEventListener("mousemove", (e) => {
//현재 마우스를 대고 있는 엘리먼트에서 마우스의 상대적인 위치를 가져옴
const x = e.offsetX;
const y = e.offsetY;
console.log(x, y);
img.style.transformOrigin = `${x}px ${y}px`;
img.style.transform = "scale(2)";
})
container.addEventListener("mouseleave", (e) => {
img.style.transformOrigin = "center";
img.style.transform = "scale(1)";
})
</script>
</html>