Как при наведении увеличивать картинку CSS

Чтобы увеличивать картинку при наведении курсора на нее, можно использовать псевдокласс :hover и свойства transform и transition в CSS. Пример:

img {
  width: 200px; /* изначальный размер картинки */
  transition: all 0.3s ease; /* плавный переход */
}

img:hover {
  transform: scale(1.2); /* увеличение картинки в 1.2 раза */
  cursor: pointer; /* указатель курсора изменяем на pointer */
}

Здесь мы используем псевдокласс :hover, чтобы задать стили при наведении курсора на картинку.

Свойство transition задает плавный переход от изначального размера картинки до ее увеличенного размера при наведении курсора.

С помощью свойства transform и значения scale(1.2) мы увеличиваем размер картинки в 1.2 раза при наведении курсора.

Также мы добавляем стиль cursor: pointer, чтобы курсор мыши изменял свой вид при наведении на картинку.

Конечно, можно настроить и другие свойства для эффекта увеличения картинки, в зависимости от требуемого дизайна и задачи.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как при наведении увеличивать картинку CSS

Наш специалист свяжется с вами в ближайшее время и уточнит детали