По нажатию на картинку увеличивать её поверх сайта. Как сделать это на чистом JS?

Question

Jegor11193 @Jegor11193

По нажатию на картинку увеличивать её поверх сайта. Как сделать это на чистом JS?

Обучаюсь разработке, освоение идет с переменным успехом. Суть такая: есть набор карточек (которые могу добавлять и удалять) с помощью клика на фото к этой карточке нужно чтобы она открывалась в размерах ширины 80vw, максимальная высота — 80vh. Сделал в дереве этот div, подключил css правило.

HTML

<div class="popup popup__image"> 
  <img scr="./images/close.svg" alt="" class="popup__close popup__close_image">
 </div>

CSS

.popup__image {
    display: block;
    position: relative;
    max-width: 80vw;
    max-height: 80vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: 100px;
    margin-left: 100px;
}

Сами картинки на странице подгружаются из массива:

javascript:

//массив со ссылками
const initialCards = [
    {
        name: 'Архыз',
        link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
    }, ... ]

const Card = function(name, link) {

//создание разметки для карточек
    const placeCard = document.createElement('div');
    const cardImage = document.createElement('div');
    const cardButtonDelete = document.createElement('button');
    const cardDescription = document.createElement('div');
    const cardName = document.createElement('h3');
    const cardButtonLike = document.createElement('button');

// добавление классов
    placeCard.classList.add('place-card');
    cardImage.classList.add('place-card__image')
    cardImage.setAttribute('style', ('style', `background-image: url(${link})`)); // фон карточки
    cardButtonDelete.classList.add('place-card__delete-icon');
    cardDescription.classList.add('place-card__description');
    cardName.classList.add('place-card__name');
    cardName.textContent = name;
    cardButtonLike.classList.add('place-card__like-icon');

//вложить блок в другой
    cardImage.appendChild(cardButtonDelete);
    cardDescription.appendChild(cardName);
    cardDescription.appendChild(cardButtonLike);
    placeCard.appendChild(cardImage);
    placeCard.appendChild(cardDescription);
    placesList.appendChild(placeCard);

};

//цикл добавления карточек
for (i = 0; i < initialCards.length; i++) {
    let name = initialCards[i]['name'];
    let link = initialCards[i]['link'];
    Card(name, link);

};

//добавить карточку
const addCard = function(event) {
    event.preventDefault();
    const form = document.forms.new;
    const name = form.elements.name.value;
    const link = form.elements.link.value;
    Card(name, link);
    popup.classList.remove('popup_is-opened');
    form.reset();
};

Пытаюсь написать функцию, чтобы этот popup реализовать. Нагуглить пока получается только реализации подобных вещей с помощью фреймворков, а мне надо на чистом JS.