Увеличенная картинка при наведении курсора

Как показывать увеличенную копию изображения рядом с курсором при наведении: вариант на jQuery и на чистом JavaScript.

Эффект: наводите курсор на миниатюру — рядом с курсором появляется крупная версия картинки и двигается вместе с ним.

Стили для увеличенной копии

.zoom-preview {
  position: absolute;
  height: 200px;
  pointer-events: none;            /* не перехватывает курсор */
  box-shadow: 0 0 10px #000;
  z-index: 1000;
}

Чистый JavaScript

<script>
document.querySelectorAll('img.zoomable').forEach(function (img) {
  let preview = null;
  img.addEventListener('mouseenter', function () {
    preview = document.createElement('img');
    preview.src = img.dataset.full || img.src;   // можно указать большую версию в data-full
    preview.className = 'zoom-preview';
    document.body.appendChild(preview);
  });
  img.addEventListener('mousemove', function (e) {
    if (!preview) return;
    preview.style.left = (e.pageX + 20) + 'px';
    preview.style.top = (e.pageY - 20) + 'px';
  });
  img.addEventListener('mouseleave', function () {
    if (preview) { preview.remove(); preview = null; }
  });
});
</script>

Класс zoomable ограничивает эффект нужными картинками. Атрибут data-full позволяет показывать отдельный большой файл, а не растянутую миниатюру.

То же на jQuery

$('img.zoomable').hover(function () {
  $('body').append('<img class="zoom-preview" src="' + (this.dataset.full || this.src) + '">');
}, function () {
  $('.zoom-preview').remove();
}).on('mousemove', function (e) {
  $('.zoom-preview').css({ left: e.pageX + 20, top: e.pageY - 20 });
});

Обработчик mousemove навешивается один раз. В старой версии кода он добавлялся при каждом наведении, и обработчики накапливались.

На сенсорных экранах наведения нет, поэтому на мобильных по нажатию лучше открывать картинку в лайтбоксе.