title: How to zoom into a specific location of an image using CSS
body: <p>I am using the following code to zoom into an image:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .thumbnail {
      width: 100%;
      height: 450px;
      overflow:hidden;
  }
  .image {
      width: 100%;
      height: 100%;    
  }
  .image img {
      -webkit-transition: all 1s ease; /* Safari and Chrome */
      -moz-transition: all 1s ease; /* Firefox */
      -ms-transition: all 1s ease; /* IE 9 */
      -o-transition: all 1s ease; /* Opera */
      transition: all 1s ease;
  }
  .image:hover img {
      -webkit-transform:scale(3); /* Safari and Chrome */
      -moz-transform:scale(3); /* Firefox */
      -ms-transform:scale(3); /* IE 9 */
      -o-transform:scale(3); /* Opera */
       transform:scale(3);
  }
   &lt;/style&gt;
  
  
   &lt;div class="thumbnail"&gt;
    &lt;div class="image"&gt;
     &lt;img src="example.jpg" alt="Image zoom"&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Currently this code works except for in will only zoom to the center of the image.
  My question is: How can I zoom into a pre-determined location (could be as simple as just left or right as opposed to the center that it currently is.) I would like to achieve the outcome using CSS if possible.</p>