** html 문서는 작성 되어 있다고 가정하고, 자바스크립트 문서만 구현
const rabbit = document.getElementsByClassName("zoom-img")[0];
function zoomIn() {
rabbit.style.transform = "scale(2)";
rabbit.style.transition = "all 0.5s";
}
function zoomOut() {
rabbit.style.transform = "scale(2)";
rabbit.style.transition = "all 0.5s";
}
rabbit.addEventListener("mouseenter", zoomIn);
rabbit.addEventListener("mouseleave", zoomOut);
img.style.transform
img.style.transform
= 'scale(n)'
: n배 만큼 이미지의 사이즈 변경
mouseenter
& mouseleave
마우스를 올렸을 때 발생하는 이벤트:
mouseenter
마우스를 내렸을 때 발생하는 이벤트:mouseleave