title: move img with mousemove
body: <p>I want to be able to move an img around within its container once the image is zoomed in, because as you can see once you click the image it becomes too big and you can't see the whole image. Also how can I make the image goes back to normal once it's not being hovered? thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Zoom in/out clothing img
    $('.image').click(function() {
      $(this).toggleClass('normal-zoom zoom-in');
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 800px;
    margin: 0 auto;
    border: 2px solid black;
    display: flex;
  }
  
  .img-wrapper {
    margin: 10px;
    overflow: hidden;
  }
  
  .image {
    width: 100%;
    height: 100%;
  }
  
  .text {
    width: 40%;
    padding: 20px;
  }
  
  .normal-zoom {
    transform: scale(1);
    cursor: zoom-in;
    transition: all 250ms;
  }
  
  .zoom-in {
    transform: scale(1.6);
    cursor: zoom-out;
    transition: all 250ms;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="img-wrapper"&gt;
      &lt;img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom"&gt;
    &lt;/div&gt;
    &lt;p class="text"&gt;Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>