Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.
Пример
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
HTML
<p class="gain-left">Lorem Ipsum</p>
<p class="gain-center">Lorem Ipsum</p>
<p class="gain-right">Lorem Ipsum</p>
CSS
/* Текст слева */
.gain-left {
transition: 1s; /* Время эффекта */
text-align: left;
}
.gain-left:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст по центру */
.gain-center{
transition: 1s; /* Время эффекта */
text-align: center;
}
.gain-center:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст справа */
.gain-right {
transition: 1s; /* Время эффекта */
text-align: right;
}
.gain-right:hover {
transform: scale(1.2); /* Увеличиваем масштаб */
}