Чтобы увеличивать картинку при наведении курсора на нее, можно использовать псевдокласс :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.2 или можно выставлять любые значения? Спасибо.