За зміну масштабу зображення відповідає властивість transform з функцією scale(). Як її значення вказується число більше 1 збільшення масштабу і менше 1 — зменшення масштабу. Наприклад, число 1.2 збільшує масштаб на 20%. Щоб картинка збільшувалася при наведенні на неї курсора миші, властивість transform слід прив'язати до псевдокласу :hover, як показано в прикладі 1.
Приклад 1. Збільшення зображення
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Збільшення зображення</title> <style> .scale { transition: 1s; /* Час ефекту */
}
.scale:hover { transform: scale(1.2); /* Збільшуємо масштаб */
}
</style>
</head>
<body> <p> <img src="image/meduza1.jpg" alt="" class="scale"> <img src="image/meduza2.jpg" alt="" class="scale"> <img src="image/meduza3.jpg" alt="" class="scale">
</p>
</body>
</html>При наведенні на картинку масштаб змінюється миттєво, тому для плавного збільшення зображення додано властивість transition, воно задає час масштабування.
Якщо потрібно масштабувати картинку, не збільшуючи при цьому її розміри, кожне зображення треба помістити в <div>. Для нього задати властивість display зі значенням inline-block, щоб <div> ; став розміром із зображення; а також overflow зі значенням hidden, щоб ховалося все за межами <div> ; (приклад 2).
Приклад 2. Використання overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Збільшення зображення</title> <style> .scale { 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/meduza1.jpg" alt="" class="scale"></div> <div class="scale"><img src="image/meduza2.jpg" alt="" class="scale"></div> <div class="scale"><img src="image/meduza3.jpg" alt="" class="scale"></div>
</body>
</html>У зображень усередині рядково-блочних елементів знизу з'являється невеликий відступ, його можна прибрати за допомогою властивості display зі значенням block.