title: Scale image within div on hover
body: <p>I would like to get effect like this: </p>
  
  <p><a href="https://i.stack.imgur.com/4jvAg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4jvAg.jpg" alt="enter image description here"></a></p>
  
  <p>The assumptions are as follows:</p>
  
  <ol>
  <li>Before mouseenter (left tile) image has to be zoomed out so that the top edge of the photo is equal to the edge of the frame (!)</li>
  <li>After hover the photo is decreases out and the top edge of the image is consistently aligned with the edge of the frame and appears. Below photo is white background with the product name and price (as pictured)</li>
  <li>The height of the frame must always be the same regardless of the size of the photos</li>
  </ol>
  
  <p>What is problematic: I do not know how to make each photo fit in a way that matches the frame width at different screen widths</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  
    var $zdjecie = $('.woocommerce ul.products li.product img');
  
    $('.woocommerce ul.products li.product').hover(
      function() {
        $(this).find('img').css({
          'transform': 'scale(1)',
          'top': '0',
          'position': 'relative'
        });
      },
      function() {
        $(this).find('img').css({
          'transform': 'scale(1.6, 1.5)',
          'top': '',
          'position': 'relative'
        });
      })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>//the height of frame is different regardless of screen wide
  .woocommerce ul.products li.product a img {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    transform: scale(1.6, 1.5);
    top: 60px; // here may be problem
    position: relative;
    -webkit-transition: transform 0.4s linear, top 0.4s linear;
    -moz-transition: transform 0.4s linear, top 0.4s linear;
    -ms-transition: transform 0.4s linear, top 0.4s linear;
    transition: transform 0.4s linear, top 0.4s linear;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>What effect I get:
  <a href="https://i.stack.imgur.com/UC6N7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UC6N7.png" alt="enter image description here"></a></p>