Recreate a Google Doodle of the First World's Fair. Demo

• You are given three images: Small Image, Large Image, Scope to create the experience.

• Acceptance Criteria is pretty straightforward.

  • Recreate the demo experience, make sure the main functionality works.
  • Image must be centered in the page.
  • Make sure the area that is magnified is accurate to where the cursor is supposed to be.
  • Make sure the cursor does not show up in the magnified experience because it creates a bad user experience.

• Steps and Points

  • (35 points) Get the small image to show, and a circular div that moves when the mouse is over the image.
  • (50 points) Map the position of the mouse to the background position of the div and display magnified div.
  • (15 points) Add scope image to the div.

• Hint

  • You need the css property pointer-events: none; on the scope so your mouse events go directly to the small image. Without it, your mouse movement may not be smooth and the scope may only update when your mouse moves out of the scope.