Так недавно я получил задание создать галерею из 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/
Я также попытался расположить каждый из элементов по одному, но это слишком запутанно ималейшее изменение разрешения все испортило.
Любая помощь будет оценена.