Как сделать увеличение картинки при наведении мыши css

Узнайте, как легко создать эффект увеличения изображения при наведении курсора на него в CSS. Для этого достаточно добавить несколько строк кода к вашему файлу CSS и посмотреть, как изображения будут увеличиваться при наведении мыши.

Увеличение картинки при наведении мыши можно сделать при помощи CSS. Для этого нужно применить пару стилей для объекта и добавить анимацию. В этом примере мы будем использовать transition для анимации и transform: scale для увеличения изображения.

Для начала нужно задать пару стилей для изображения. Мы будем использовать transition со значением all 0.3s ease-in-out, чтобы настроить анимацию. Затем мы будем использовать transform и его значение scale(1.2) для увеличения изображения:

img {
    transition: all 0.3s ease-in-out;
    transform: scale(1);
}

Теперь мы добавляем стиль для изображения при наведении мыши. Мы будем использовать transform со значением scale(1.2) для увеличения изображения в два раза при наведении мыши:

img:hover {
    transform: scale(1.2);
}

Итак, мы добавили два стиля для изображения. Первый стиль добавил transition для анимации и transform: scale для увеличения изображения. Второй стиль добавил transform: scale для увеличения изображения в два раза при наведении мыши. Таким образом, мы можем сделать увеличение изображения при наведении мыши с помощью CSS.