I have created a custom jQuery and CSS function that allows an image to zoom in and out on mouseover while maintaining a constant box size. I modified an example code to suit my needs.
Check out the demo here: https://jsfiddle.net/2fken8Lg/1/
Here is the code:
JavaScript:
$('.zoom img').on({
mouseover: function() {
var $scale = 1.5;
if (!$(this).data('w')) {
var $w = $(this).width();
var $h = $(this).height();
$(this).data('w', $w).data('h', $h);
}
$(this).stop(true).animate({
width: $(this).data('w') * $scale,
height: $(this).data('h') * $scale,
left: -$(this).data('w') * ($scale - 1) / 2,
top: -$(this).data('h') * ($scale - 1) / 2
}, 'fast');
},
mouseout: function() {
$(this).stop(true).animate({
width: $(this).data('w'),
height: $(this).data('h'),
left: 0,
top: 0
}, 'fast');
}
});
CSS:
.zoom {
position: relative;
float: left;
margin: 30px 0 0 30px;
width: 400px;
height: 180px;
overflow: hidden;
border: 1px solid #000;
}
img {
position: absolute;
width: 400px;
height: 180px;
}
HTML:
<div class="zoom">
<img src="https://www.lamborghini.com/en-en/sites/en-en/files/DAM/it/models_gateway/blocks/special.png">
</div>
This code works well with fixed image sizes, but I'm wondering how I can make it work with responsive images. My website is designed to be fully responsive, so having fixed CSS widths or heights will not work across different browser sizes. Is there a way to achieve this with responsive images, perhaps without relying solely on CSS?