Плавное увеличение изображения при наведении курсора CSS

Создаем блочный элемент (div) с классом (box-wrapper), который будет служить в качестве обертки содержииого внутри
Внутри элемента (div) с классом (box-wrapper) создаим еще один блочный элемент, с помщью которого мы будем регулировать размрер блока, назовем его (box-image)
Внутри блока (div) c классом (box-image) создадим еще один блочный элемент с классом (image) для отображения содержания блочного элемента только внутри элемента с помощью свойства(overflow) со значением (hidden)
И на конец, внутри блока (div) c классом (image) добавим строчный элемент (img) с ссылкой на изображение в атрибуте (src).

				
					<div class="box-wrapper">
    <div class="box-image">
        <div class="image">
            <img decoding="async" src="assets/images/blog/iPhoneX_04.png">
        </div>
    </div>
</div>

Переходим в таблицу стилей CSS:

В классе (box-wrapper) необходимо выравнить наш блок по центру с помощью свойства (display: flex) и свойств центрирования (justify-content: center) и (align-items: center)
В (box-image) задаим ширину элемента 50% (Поскольку я размещаю данную разметку на своем сайте (см.пример ниже), то я задаю ширину 100%, если вы размещаете данный пример на пустой странице, то для корректоного отбражения задайте 50%)
В классе (image) устанавливаем свойство(overflow) со значением (hidden), для отображения содержания блочного элемента только внутри элемента, остальное будет скрыто.
В классе (image) в селекторе (img) lобавляем свойство (transition) для плавного перехода,со значением (all 1s ease-out)
Создаем новый новый класс (image) с псевдоклассом (hover:), и устанавливаем свойство (transform) со значением (scale) для масштабирования элемента по горизонтали и вертикали, в скобках задаем размер масштабирования.

				
					.box-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.box-image {
    width: 30%;
}

.image {
    overflow: hidden;
}

.image img {
    width: 100%;
    height: 100%;
    transition: all 1s ease-out;
}

.image:hover img {
    transform: scale(2.3);
}

Полезные ссылки

Контакты

Плавное увеличение изображения при наведении курсора CSS

Контакты

Евгений

Полезные ссылки

Контакты

Плавное увеличение изображения при наведении курсора CSS

Контакты

Евгений

Заполнить бриф

Оставить заявку

Бриф на разработку сайта

Оставить заявку