Создание диагональной галереи с изображениями противоположного направления - PullRequest
0 голосов
/ 08 мая 2019

Так недавно я получил задание создать галерею из 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);
}

Вотмой вывод: До наведения После наведения

Я не вижу, как я могу расположить два изображения рядом друг с другом, одно из которых направлено вверх и одно вниз от одного и того женачальная позиция ...

Подобное представление проблемы показано здесь: https://auteur.g5plus.net/home-introducing-book/

Я также попытался расположить каждый из элементов по одному, но это слишком запутанно ималейшее изменение разрешения все испортило.

Любая помощь будет оценена.

...