За изменение масштаба изображения отвечает свойство transform с функцией scale(). В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.
Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1.
Пример 1. Увеличение картинки
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Увеличение изображения</title>
<style>
.scale {
width: 200px; /* Ширина картинок */
transition: 1s; /* Время эффекта */
}
.scale:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
</style>
</head>
<body>
<p>
<img src="image/meduza-red.webp" alt="" class="scale">
<img src="image/meduza-green.webp" alt="" class="scale">
<img src="image/meduza-blue.webp" alt="" class="scale">
</p>
</body>
</html>
При наведении на картинку масштаб меняется мгновенно, поэтому для плавного увеличения изображения добавлено свойство transition, оно задаёт время масштабирования.
Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в <div>. Для него задать свойство display со значением inline-block, чтобы <div> стал размером с изображение; а также overflow со значением hidden, чтобы пряталось всё за пределами <div> (пример 2).
Пример 2. Использование overflow
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Увеличение изображения</title>
<style>
.scale {
width: 200px; /* Ширина картинок */
display: inline-block; /* Строчно-блочный элемент */
overflow: hidden; /* Скрываем всё за контуром */
}
.scale img {
transition: 1s; /* Время эффекта */
display: block; /* Убираем небольшой отступ снизу */
}
.scale img:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
</style>
</head>
<body>
<div class="scale"><img src="image/meduza-red.webp" alt="" class="scale"></div>
<div class="scale"><img src="image/meduza-green.webp" alt="" class="scale"></div>
<div class="scale"><img src="image/meduza-blue.webp" alt="" class="scale"></div>
</body>
</html>
У изображений внутри строчно-блочных элементов снизу появляется небольшой отступ, его можно убрать с помощью свойства display со значением block.