Custom Element Magnifier Effect
Budget: ₹600 – ₹1,500 INR
I need a smooth “magnifying-glass” interaction added to one specific element on my webpage. The target is not an image; it’s a custom HTML block that shows live data, and I want visitors to be able to inspect it more closely through a circular lens that follows the pointer.
Feel free to build the effect with vanilla JavaScript, a lightweight ES6 module, or a minimal jQuery snippet—whatever keeps the bundle lean and easy to drop into an existing page. CSS transforms or filters are fine for the zoom itself; I just want the movement to feel fluid and avoid any layout shift.
Deliverables
• A self-contained HTML / CSS / JS snippet, clearly commented.
• One line of code (or concise function) that lets me attach the lens to any other element in the future.
• Brief setup notes so I can tweak the magnification level, lens size, and activation trigger later.
Acceptance criteria
• Lens appears only inside the chosen element and follows the cursor smoothly.
• Default zoom set to 2×, adjustable via a simple variable.
• Works reliably on the latest Chrome, Firefox, Safari, and Edge without external dependencies beyond what you include.
• Graceful fallback or touch support for mobile devices is a plus.
That’s the full scope—once I can copy your snippet into my project and see the lens working on the designated element, we’re done.
Feel free to build the effect with vanilla JavaScript, a lightweight ES6 module, or a minimal jQuery snippet—whatever keeps the bundle lean and easy to drop into an existing page. CSS transforms or filters are fine for the zoom itself; I just want the movement to feel fluid and avoid any layout shift.
Deliverables
• A self-contained HTML / CSS / JS snippet, clearly commented.
• One line of code (or concise function) that lets me attach the lens to any other element in the future.
• Brief setup notes so I can tweak the magnification level, lens size, and activation trigger later.
Acceptance criteria
• Lens appears only inside the chosen element and follows the cursor smoothly.
• Default zoom set to 2×, adjustable via a simple variable.
• Works reliably on the latest Chrome, Firefox, Safari, and Edge without external dependencies beyond what you include.
• Graceful fallback or touch support for mobile devices is a plus.
That’s the full scope—once I can copy your snippet into my project and see the lens working on the designated element, we’re done.