Увеличение картинки с помощью JavaScript

JavaScript является одним из самых популярных языков программирования, используемых для создания интерактивных веб-сайтов. Один из способов использования JavaScript на сайте - это увеличение картинки при наведении на нее курсора. Рассмотрим как это сделать.

HTML-разметка

Сначала нужно создать элемент, который будет отображать картинку. Указываем некоторый id для это элемента, который мы будем использовать в JavaScript.

<div id="image-container">
    <img src="path/to/image.png">
</div>

CSS

Добавим стили, которые будут отображать картинку на странице и зададут ее размеры. Мы также скроем картинку по умолчанию.

#image-container {
    position: relative;
    width: 400px;
}

#image-container img {
    display: none;
}

JavaScript

При наведении на элемент, показываем картинку и увеличиваем ее размеры, а при уходе курсора, возвращаем все назад.

const imageContainer = document.querySelector('#image-container');
const image = imageContainer.querySelector('img');

imageContainer.addEventListener('mouseenter', () => {
    image.style.display = 'block';
    image.style.position = 'absolute';
    image.style.width = '600px';
    image.style.zIndex = '1';
    image.style.top = '-100px';
    image.style.left = '-100px';
});

imageContainer.addEventListener('mouseleave', () => {
    image.style.display = 'none';
});

Итого

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