Доверьте продвижение нам
теги: ,

Категории

Рубрики

Хотите получать заявки моментально? Вся наша команда и партнеры приступят к проекту, подключив также продвижение Авито. Подходит для тех, кого не удовлетворяет имеющийся объем продаж. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение + Авито продвижение.

от 189 000 

Как при наведении увеличивать картинку 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”»

  1. Виктор:

    А это единственное увеличение в 1.2 или можно выставлять любые значения? Спасибо.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

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

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.