Как мне заставить эти два изображения расширяться при наведении курсора, но объединяться в одно изображение, когда на не ⇐ Html

[Гость]

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

Я сделал следующее, и это в некоторой степени работает, но при наведении правого курсора не отображается полное изображение, а также ни одно изображение не скрывает другое изображение при раскрытии. Что я делаю не так?

Основной вид, как я хочу, чтобы он выглядел перед наведением курсора Левая сторона наводится, но не занимает всю ширину Наведите курсор на правую сторону, но изображение не отображается полностью и не занимает всю ширину




.image-section { дисплей: гибкий; } #split-image { ширина: 50%; высота: 600 пикселей; объектное соответствие: обложка; переполнение: скрыто; } #design-img { ширина: 1900 пикселей; объектное соответствие: обложка; позиция объекта: 110–25 пикселей; } #split-image:hover { курсор: указатель; ширина: 100%; продолжительность перехода: 2 с; } #split-image-2 { ширина: 50%; высота: 600 пикселей; соответствие объекта: подходит; переполнение: скрыто; } #кодирование-img { ширина: 1900 пикселей; объектное соответствие: обложка; позиция объекта: -790px -10px; } #split-image-2:hover { курсор: указатель; ширина: 100%; объектное соответствие: обложка; переход: 2 с; }