CSS object-position или подобное свойство для фотосетки ⇐ CSS

[Anonymous]

Надеюсь получить информацию. Я прохожу несколько онлайн-курсов по веб-разработке и в настоящее время экспериментирую с добавлением изображений на HTML-страницу (сетка изображений 3x3).

Сначала я использовал Transform, чтобы я мог масштабировать изображение с переходом в 0,5 секунды до размера в 1,5 раза после наведения на него курсора с задержкой 0,5 секунды.

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

Чтобы исправить это, я сначала попробовал позицию: относительная; left: 6%; но узнал, что позиция не является свойством, которое можно анимировать, поэтому изображение немедленно меняет положение, а затем масштабируется через 0,5 секунды.

Моя вторая попытка была с object-position: 90px; это свойство работает с задержкой, но после масштабирования кажется, что большая часть изображения обрезана.

Я пробовал разные свойства, такие как Transform-Origin, которые работают, но создают ощущение сбоев при масштабировании, а затем завершают перемещение изображения в сторону, теряя плавность.

Не могу найти полезную документацию по расположению объекта, объясняющую, почему часть изображения обрезается. Это свойство дает плавный эффект масштабирования и позиционирования, но у меня есть проблема с обрезкой.

Вот ссылка на код, где я использую это упражнение:

https://codepen.io/superavd88/pen/PoqYoRJ

Буду очень признателен за любые идеи, поскольку последние пару дней я безуспешно пытался решить эту проблему.

Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/600 ... photo-grid