Ограничить масштабирование назначенными изображениями

Question

Следующий код js работает нормально.Проблема в том, что он масштабирует ВСЕ теги img на странице.Мне это нужно только для увеличения определенных изображений.Я попытался создать класс под названием «zoom» для тега img и внес соответствующие изменения в код, но он не работает.Если вы знаете, как изменить код, пожалуйста, дайте мне знать.Спасибо!

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