youx.agency
YOUX agency
Обсудить проект

Эффект перехода при наведении мыши на текст

Данный код помогает добавить красивый переход на текст при наведении мыши. Можно поменять скорость перехода и цвет заднего фона

Заказать код
Вступить в чат
Предложить код
Видео-урок

Инструкция

1

Создали элемент текст и присвоили ему тег h1

2

Скопируйте и вставьте код ниже в блок "ST123"

3

Вы можете присвоить свой class элементу текст и поменять его в коде

Скопировать код
Код скопирован

 <!-- Эффект перехода при наведении мыши на текст -->
 <!-- https://youx.agency/effekt-perehoda-pri-navedenii-myshi-na-tekst-v-tilda -->

<style>

h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h1::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: #ff4621;
  z-index: -1;
  transition: transform .5s ease;
}

h1 {
  position: relative;
  font-size: 5rem;
}


@media (orientation: landscape) {
  body {
    grid-auto-flow: column;
  }
}

</style>

Другие модификации