Scale image in div on hover mode
I would like to get the effect like this:
The assumptions are as follows:
- Before the mouse image (left tile) is zoomed out so that the top edge of the photo is equal to the edge of the frame (!)
- After hovering, the image is zoomed in and the top edge of the image is sequentially aligned with the edge of the frame and appears. Below photo is a white background with product name and price (as pictured).
- Frame height should always be the same regardless of photo size
Which is problematic: I don't know how to make each photo fit to fit the width of the frame 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 impact I am getting:
+3
source to share
1 answer
You can use position:absolute;
on images, with negative left / right margins and fixed height to position the image.
Then scale the image on hover to reveal the text. Here's 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>
+5
source to share