Как сделать - Увеличение при наведении
Узнать, как увеличить/масштабировать элемент при наведении с помощью CSS.
Увеличить при наведении
Наведите курсор на зеленую коробку:
Как увеличить при наведении
Пример
<style>
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% зум - Примечание: если масштаб слишком велик, он будет выходить за пределы видового экрана) */
}
</style>
<div class="zoom"></div>
Редактор кода »Совет: Зайдите на наш учебник CSS Трансформировать чтобы узнать больше о том, как масштабировать элементы.