Javascript 单击“全屏缩放图像”

我有一个带有产品图像的滑块，有一个按钮

查看更多信息

。我希望当有人点击该按钮时，该产品的图像应该是可见的/缩放到全屏动画。就像这样：

--示例链接

我的标题截图：

我的代码：

<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>

//滑块
//滑块项目1
鼓舞人心的收藏
创意设计

Lorem ipsum dolor sit amet，是一位杰出的建筑设计师，也是一位临时建筑设计师
这是一个巨大的挑战。

//滑块图像
//滑块项目，等等。。。。

---

我不知道怎么做那种图像缩放效果。你能帮我做这个吗？我被卡住了

您可以通过创建一个简单的动画来增加图像大小，然后在该图像上创建一个单击侦听器来完成此操作

请看下面的示例，它通过单击图像来增加图像大小

const image=document.querySelector（“.clickable image”）；
image.addEventListener（“单击”，（）=>{
image.classList.add（“图像打开”）；
})

。可点击图像{
宽度：50vw；
}
.图像打开{
动画：缩放2s向前线性；
}
.可单击图像：悬停{
光标：指针；
}
@关键帧缩放{
从{
宽度：50vw；
}到{
宽度：100vw；
}
}

---

你要找的东西可以用一种叫做“模态”的东西做成。有很多JS库，搜索“模态库”应该会给你很多选择。不，模态是新内容，我的老板不想让我制作模态。哼。。。我当时不太明白你的要求。。。你不是想在点击按钮时放大图像吗？事实上，我在问题中附上了示例链接。你可以查看这个链接