Как сделать что бы картинка сдвигала соседние боковые элементы?

Question

[Kostylev2021]

Как сделать что бы в грид блоке из 4 столбцов картинка на которую наведён указатель увеличивалась по горизонтали и сдвигала соседние боковые элементы?

Comments

[Ankhena]

1. Где песочница с вашими попытками и видимой проблемой?
2. Что должно происходить с другими строками?
3. Если строка одна, зачем для этого грид?

[Вадим]

Типа так?

[Kostylev2021]

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

[Ankhena]

Kostylev2021, гридами без js на данный момент не выйдет, мне кажется.
А вот флексами получится.

[Kostylev2021]

Вадим, Да только две строки

[Kostylev2021]

Вадим, только у вас если добавить еще строку то при увеличении картинки последний элемент переноситься на строку в низ а мне нужно что бы элементы оставались на своих строках .

[Вадим]

Kostylev2021, И что тогда должно происходить с соседом справа, когда картинка стоит в предпоследней колонке и следующий элемент уже некуда сдвигать?

[Kostylev2021]

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

[Вадим]

Kostylev2021, классно, но в голове не компилируется.
Если хотите помощи, то делайте демку со своим кодом, а так же наглядную разницу между текущим результатом и ожидаемым и добавляйте эту информацию в вопрос.

[Ankhena]

Kostylev2021, но вы всё таки делайте песочницы самостоятельно, чтобы было что просто отредактировать, а не делать за вас.

Answer 1

[Ankhena]

https://codepen.io/AnnaSummer/pen/ZERRrpq