Растущая галерея

Гармошка фотополос: наведённая распахивается, соседи плавно сжимаются.

Ведите мышью по полосам.

фьорд

озеро

вершины

водопад

город

Код

<div class="grow-gallery">
  <div class="item" style="background-image:url(a.jpg)"></div>
  <div class="item" style="background-image:url(b.jpg)"></div>
  <div class="item" style="background-image:url(c.jpg)"></div>
</div>

<style>
.grow-gallery { display: flex; gap: 10px; height: 60vh; }
.item { flex: 1; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center;
  transition: flex .55s cubic-bezier(.16,1,.3,1); cursor: pointer; }
.item:hover { flex: 3.2; }        /* наведённая растёт, соседи сжимаются */
</style>

Промпт для ИИ

Сделай растущую галерею-гармошку: flex-ряд фотополос (flex:1, background cover, скругления), у наведённой flex:3.2 с transition flex 0.55s cubic-bezier(0.16,1,0.3,1) — она распахивается, соседи плавно сжимаются. Подписи внутри появляются с задержкой 0.15s только у раскрытой. На мобильном — вертикальная колонка с ростом высоты вместо flex.