diff --git a/100_projects/70-javascript-zoom-effect/index.html b/100_projects/70-javascript-zoom-effect/index.html new file mode 100644 index 0000000..1c6501b --- /dev/null +++ b/100_projects/70-javascript-zoom-effect/index.html @@ -0,0 +1,15 @@ + + + + + + Zoom Effect + + + + +
+ purple kitty +
+ + diff --git a/100_projects/70-javascript-zoom-effect/photo-cat.avif b/100_projects/70-javascript-zoom-effect/photo-cat.avif new file mode 100644 index 0000000..61ad429 Binary files /dev/null and b/100_projects/70-javascript-zoom-effect/photo-cat.avif differ diff --git a/100_projects/70-javascript-zoom-effect/script.js b/100_projects/70-javascript-zoom-effect/script.js new file mode 100644 index 0000000..489d71d --- /dev/null +++ b/100_projects/70-javascript-zoom-effect/script.js @@ -0,0 +1,15 @@ +const container = document.getElementById("container"); +const img = document.querySelector("img"); + +container.addEventListener("mousemove", (e) => { + const x = e.clientX - e.target.offsetLeft; + const y = e.clientY - e.target.offsetTop; + console.log(x, y); + + img.style.transformOrigin = `${x}px ${y}px`; + img.style.transform = "scale(2)"; +}); +container.addEventListener("mouseleave", () => { + img.style.transformOrigin = "center center"; + img.style.transform = "scale(1)"; +}); \ No newline at end of file diff --git a/100_projects/70-javascript-zoom-effect/style.css b/100_projects/70-javascript-zoom-effect/style.css new file mode 100644 index 0000000..71242ea --- /dev/null +++ b/100_projects/70-javascript-zoom-effect/style.css @@ -0,0 +1,23 @@ +* { + box-sizing: border-box; +} +body { + background-color: #663399; + display: flex; + align-items: center; + justify-content: 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 center; + object-fit: cover; + height: 100%; + width: 100%; +} \ No newline at end of file