I would like to get effect like this:
The assumptions are as follows:
- 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 (!)
- 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)
- 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:
