<div id="description">
<h1>Зміна розміру шрифту</h1>
<p>Цей приклад демонструє зміну розміру шрифту елемента при наведенні курсору на нього.</p>
</div>
<div id="result">
<div class="container">
<p class="text">Текст</p>
</div>
</div>
#description {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
}
#description h1 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-family: Arial, sans-serif;
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.text {
font-size: env(--font-size, 16px);
transition: font-size 0.3s ease;
}
.text:hover {
font-size: env(--font-size-hover, 20px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.