Hover-Magnification

🌼 Programmer’s Picnic Lesson

Build an Amazon-Style Image Magnifier (HTML + CSS + JavaScript)

“We don’t copy code. We understand it, then make it our own.”
— Programmer’s Picnic ☕🌿

Product Gallery

🎯 What You Will Learn in This Lesson

By the end of this lesson, you will be able to:

• Create an Amazon-style image zoom magnifier
• Understand how mouse position becomes zoomed pixels
• Use CSS backgrounds for magnification (no canvas, no libraries)
• Make it Blogger-safe and copy-paste friendly
• Modify zoom, lens shape, and layout confidently

This lesson uses a light saffron theme — calm, readable, and distraction-free.

---

🧠 Concept First: How Image Magnification Really Works

Before writing code, let’s understand the idea.

The magnifier is made of three parts

1. Small Image
   This is the normal image the user sees.
2. Lens (Zoom Glass)
   • Follows the mouse
   • Shows a zoomed portion using background-image
3. Result Box (Preview Window)
   • Shows the same zoomed area
   • At a bigger size for clarity

👉 Important insight:
We are not enlarging the image element.
We are enlarging the background image and shifting it.

This is the same trick Amazon uses.

---

🧩 Step 1: Create the HTML Structure

We start with simple HTML.

<div class="magnify-wrapper">
  <div class="magnify-container" id="demoContainer">
    <img id="demoImg" class="magnify-small"
         src="YOUR_IMAGE_URL"
         alt="Product Image">
    <div id="demoLens" class="magnify-lens"></div>
  </div>

  <div id="demoResult" class="magnify-result"></div>
</div>

Why this structure?

• .magnify-container — holds the image and lens (relative positioning)
• .magnify-lens — floats above the image and follows the mouse
• .magnify-result — shows the zoomed output

Think of it as:

Image → Lens → Preview

---

🎨 Step 2: Style It (Light Saffron Friendly)

Now we add CSS to make it usable and beautiful.

Key ideas in CSS

• Lens is position: absolute
• Container is position: relative
• Zoom happens via background-size and background-position

.magnify-container {
  position: relative;
  width: 300px;
}

.magnify-lens {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: none;
  background-repeat: no-repeat;
}

.magnify-result {
  width: 380px;
  height: 380px;
  display: none;
  background-repeat: no-repeat;
}

💡 Teaching Tip:
If you remove border-radius: 50%, the lens becomes square.

---

⚙️ Step 3: JavaScript — Making the Magic Happen

Step 3.1 — Setup

const img = document.getElementById("demoImg");
const lens = document.getElementById("demoLens");
const result = document.getElementById("demoResult");
const container = document.getElementById("demoContainer");

const zoom = 3;

• zoom = 3 means 3× magnification
• The same image is used as a background for lens and result

---

Step 3.2 — Initialize on Image Load

function init() {
  lens.style.backgroundImage = `url(${img.src})`;
  result.style.backgroundImage = `url(${img.src})`;

  container.addEventListener("mouseenter", show);
  container.addEventListener("mouseleave", hide);
  container.addEventListener("mousemove", moveLens);
}

👉 We wait for image load because we need correct width and height for zoom math.

---

Step 3.3 — Track Mouse & Clamp the Lens

let x = e.clientX - rect.left - lens.offsetWidth / 2;
let y = e.clientY - rect.top - lens.offsetHeight / 2;

Meaning:

• Convert screen coordinates
• Into image-relative coordinates
• Center the lens under the cursor

if (x < 0) x = 0;
if (y < 0) y = 0;
if (x > img.width - lens.offsetWidth) x = img.width - lens.offsetWidth;
if (y > img.height - lens.offsetHeight) y = img.height - lens.offsetHeight;

This prevents the lens from going outside the image.

---

Step 3.4 — Zoom Using Background Math

const bgW = img.width * zoom;
const bgH = img.height * zoom;

lens.style.backgroundSize = `${bgW}px ${bgH}px`;
result.style.backgroundSize = `${bgW}px ${bgH}px`;

lens.style.backgroundPosition = `-${x * zoom}px -${y * zoom}px`;
result.style.backgroundPosition = `-${x * zoom}px -${y * zoom}px`;

✨ Key Insight:
We move the background opposite to the mouse so the correct area appears magnified.

---

🛠️ Things You Can Now Modify (Homework)

• Change zoom: const zoom = 4;
• Square lens: border-radius: 0;
• Smaller preview box
• Move preview inside the image
• Use a high-resolution image for sharper zoom

---

🧘 Final Thought (Programmer’s Picnic)

This lesson teaches more than a feature.

• Coordinate systems
• Visual math
• CSS background manipulation
• Real-world UI engineering

This is front-end engineering, not decoration.

☕🌿 – Programmer’s Picnic