html盒模型鼠标悬停图片放大

以下是一个HTML盒模型鼠标悬停图片放大的例子：

<style>
    .box {
        width: 200px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    .box img {
        width: 100%;
        height: 100%;
        transition: transform 0.5s;
    }
    .box:hover img {
        transform: scale(1.2);
    }
    .box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.5s;
    }
    .box:hover::before {
        opacity: 1;
    }
    .box p {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 10px;
        margin: 0;
        color: #fff;
        font-size: 18px;
        text-align: center;
        opacity: 0;
        transition: opacity 0.5s;
    }
    .box:hover p {
        opacity: 1;
    }
</style>

<div class="box">
    <img src="https://picsum.photos/200/200" alt="图片">
    <p>图片描述</p>
</div>

当鼠标悬停在盒子上时，图片会放大1.2倍，同时盒子上会出现半透明的黑色遮罩和图片描述文字。

--相关问题--:
1. 如何在HTML中实现图片轮播效果？
2. 如何使用CSS实现响应式布局？
3.