title: React magnify image comparison on hover
body: <p>I've seen various solutions for magnifying images on hover, <a href="https://adamrisberg.github.io/react-image-magnifiers/" rel="nofollow noreferrer">here</a> is a great package that does just that.</p>
  <p>I am trying to do this for the <a href="https://www.npmjs.com/package/react-compare-image" rel="nofollow noreferrer">react-compare-image</a> package, i.e., whenever you hover over an image comparison, it zooms into the section the mouse is hovering over.</p>
  <p>Here is a full working example of what I have done so far: <a href="https://codesandbox.io/s/heuristic-galileo-h6y5u?file=/src/App.js:285-333" rel="nofollow noreferrer">https://codesandbox.io/s/heuristic-galileo-h6y5u?file=/src/App.js:285-333</a></p>
  <p>The issue is, I want to magnify the <em>whole component</em>, not just an image. The example code above just shows one of the images using <code>backgroundImage</code> so it's no good.</p>
  <p>I'm doing this to show a low resolution image on the left, and the same image in high resolution on the right. Sometimes you need to zoom in a fair bit to see the difference.</p>