创建具有相反方向图像的对角画廊

Question

因此，最近我完成了一个任务，即创建一个由9个对角线定位的图像组成的画廊，将其悬停时会放大并弄直，并在其上方显示文本。我显然没有完成任务，但是我全神贯注于该任务，无法解决。

这是我到目前为止尝试过的：

<section>
    <div class="wall">
        <div class="box">
            <img src="images/solace.jpg">
        </div>
        <div class="box">
            <img src="images/proud.jpg">
        </div>
        <div class="box">
            <img src="images/solace.jpg">
        </div>
        <div class="box">
            <img src="images/proud.jpg">
        </div>
    </div>
</section>

.wall {
    width: 100%;
}

.wall .box {
    width: 20%;
    margin-left: 2%;
    display: inline-block;
    transform: rotate(30deg) scale(0.7);
    transition: 0.5s ease;
}

.wall .box:hover {
    transform: rotate(30deg) scale(1);
}

这是我的输出： Before hover After hover

我看不到如何将两个图像彼此相邻放置，但是一个图像从相同的起始位置指向上方和向下指向...

此问题的相似表示如下所示： https://auteur.g5plus.net/home-introducing-book/

我也尝试过将每个元素都一个一个地放置，但是那太乱了，分辨率的微小变化都会破坏所有内容。

任何帮助将不胜感激。