Увеличение текста при наведении CSS

Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.

Пример

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); /* Увеличиваем масштаб */
}