Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Preview a Zoomed / Magnified Image on Mouse Hover in React

easyreactmouse eventsimage zoomcsse-commercemathAmazonFlipkartEtsyUI Component

Prompt

Create an image zoom viewer component in React that mimics the product image zoom feature found on e-commerce sites like Amazon or Flipkart. When the user hovers the mouse over the product thumbnail image, calculate the cursor position relative to the image and display a magnified/zoomed portion of the image in a separate panel beside it. The zoom panel should update in real time as the mouse moves. Handle boundary edges so the zoomed area does not go out of bounds.

Calculate cursor position as percentage of image width/height to get normalized coordinates.
Test Results

Preview a Zoomed / Magnified Image on Mouse Hover in React

Create an image zoom viewer component in React that mimics the product image zoom feature found on e-commerce sites like Amazon or Flipkart. When the user hovers the mouse over the product thumbnail image, calculate the cursor position relative to the image and display a magnified/zoomed portion of the image in a separate panel beside it. The zoom panel should update in real time as the mouse moves. Handle boundary edges so the zoomed area does not go out of bounds.