将缩放限制在指定的图像上

Question

以下js代码可以正常工作。问题在于它正在缩放页面上的所有“ img”标签。我只需要缩放某些图像即可。我尝试为img标签创建一个名为“ zoom”的类，并对代码进行了适当的更改，但是它不起作用。如果您知道如何修改代码，请告诉我。谢谢！

$('body').append('<div class="product-image-overlay"><span class="product-image-overlay-close">x</span><img src="" /></div>');
var productImage = $('img');
var productOverlay = $('.product-image-overlay');
var productOverlayImage = $('.product-image-overlay img');
productImage.click(function () {
var productImageSource = $(this).attr('src');

productOverlayImage.attr('src', productImageSource);
productOverlay.fadeIn(100);
$('body').css('overflow', 'hidden');

$('.product-image-overlay-close').click(function () {
    productOverlay.fadeOut(100);
    $('body').css('overflow', 'auto');
});
});