Scale image within div on hover

Question

I would like to get effect like this:

The assumptions are as follows:

1. 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 (!)
2. 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)
3. The height of the frame must always be the same regardless of the size of the photos

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

My 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' }); }) }) 

 //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; } 

What effect I get:

Answer 1

You can use position:absolute; on the images, with negative left/right margins and a fixed height to position the image.
Then scale the image on hover to reveal the text. Here is an example :

 .wrap{ display:flex; } .el{ position:relative; margin:20px; outline:1px solid darkorange; outline-offset : 10px; width:250px; height:420px; padding-top:340px; box-sizing:border-box; text-align:center; overflow:hidden; } .el img{ position:absolute; top:0; left:-100%; right:-100%; height:350px; width:auto; margin:auto; transform-origin:50% 0; transform:scale(1.2); transition:transform .3s ease-out; } .el:hover img{ transform: scale(1); } 

 <div class="wrap"> <div class="el"> <img src="http://via.placeholder.com/640x480" alt=""> <h3>The title here</h3> <p>Some text here</p> </div> <div class="el"> <img src="http://via.placeholder.com/480x640" alt=""> <h3>The title here</h3> <p>Some text here</p> </div> </div>