Измените размер дочернего блока до размера родительского блока при наведении курсора с сохранением исходных пропорций. ⇐ CSS

[Гость]

У меня следующее расположение блоков (родительский div, который содержит 4 дочерних div. Возможно, в сетке или гибком формате, используйте любые инструменты, которые вам нужны): здесь. При наведении курсора мыши на один из дочерних блоков измените его размер до ширины/высоты его родительского блока (в зависимости от параметра, который первым соответствует дочернему блоку), сохраняя исходные пропорции дочернего блока. Важно отметить, что все остальные дочерние блоки должны оставаться на своих местах, размер только наведенного блока должен быть изменен поверх всех дочерних блоков (вероятно, следует использовать z-индекс, но я не уверен). Пожалуйста, обеспечьте плавность анимации. Используйте любые дополнительные теги/стили, необходимые для решения проблемы. Используйте только html/css. Заранее благодарен за вашу помощь.

Я пытался добиться такого поведения, используя относительное/абсолютное позиционирование родительских и дочерних элементов с дополнительными элементами-обертками, но мне не удалось добиться плавности такой анимации.