Наложение и масштабирование изображения, чтобы оно занимало как можно большую часть экрана с плавным переходом. ⇐ CSS

[Anonymous]

У меня есть несколько столбцов изображений разной высоты, и я пытаюсь сделать так, чтобы при нажатии на одно из них оно занимало всю высоту экрана, сохраняя при этом соотношение сторон и скрывая другое. изображения, увеличивая их границы и занимая весь экран. Что-то вроде наложения, которое увеличивается в зависимости от положения изображения.
Сетка:
[img]https://i .sstatic.net/cWqmvS0g.png[/img]

Наложение, когда изображение находится в центре:


Наложение, когда изображение находится сбоку:


Я бы хотел использовать Scale()< /code> но я не знаю, насколько масштабировать, так как изображения имеют разный размер.
Я пробовал много разных вариантов изменения высоты и ширины, но переход никогда не работает, а другие изображения перемещаются вместе с изменением размера. Я также пробовал использовать позицию: Absolute, но тогда другие изображения перемещаются при изменении позиции, и я все еще не могу заставить переход работать.
Моя другая идея заключалась в том, чтобы продублировать выбранное изображение в dom с позицией: Absolute, но я не могу заставить его начинаться с того же места и размера, что и исходное изображение.
Есть ли более простой способ сделать это?? Я не могу найти подобных примеров, но уверен, что это дубликат.



....


.grid {
column-count: 4;
}

.image {
width: 100%
height: 300px;
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... ith-a-smoo