увеличить изображение в полноэкранном режиме

Question

У меня есть слайдер с изображением товара, есть кнопка view more. Я хочу, чтобы, когда кто-то нажимал на эту кнопку, изображение этого продукта было видно / увеличено до полного экрана с анимацией. Просто так:

https://dribbble.com/shots/6347184-Better-Hero - Пример ссылки

Скриншот моего заголовка:

Мой код:

<div class="projectSlider"> // slider
    <div class="projectSlider--item"> // slider item 1
        <div class="row">
            <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="projectSlider--text">
                    <div class="projectSlider--subTitle">An Inspirational Collection Of</div>
                    <div class="projectSlider--title"><span>Creative Designs</span></div>
                    <p class="projectSlider--description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua.
                    </p>
                    <a href="#" class="btn secondary projectSlider--view" data-quickview="quickView">View
                        More</a>
                </div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12">
                <div class="projectSlider--img">
                    <img src="img/template.jpg" alt="template"> // slider image
                </div>
            </div>
        </div>
    </div>
    // slider items, so on....
</div>

Я не знаю, как сделать такой эффект увеличения изображения. Можете ли вы помочь мне с этим? Я застрял

Answer 1

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

Посмотрите на следующий пример, который увеличивает размер изображения, нажав на нем.

        const image = document.querySelector(".clickable-image");

        image.addEventListener("click", () =>{
            image.classList.add("image-open");
        })

.clickable-image{
  width:50vw;
}

.image-open{
  animation: scaleUp 2s forwards linear;
}

.clickable-image:hover{
  cursor: pointer;
}

@keyframes scaleUp{
  from{
    width:50vw;
  }to{
    width:100vw;
  }
}

    <img class="clickable-image" src="https://i.pinimg.com/originals/ea/e4/a5/eae4a5191fafae3979ea975d206fcd0b.jpg" alt="image">