Разбираем по шагам симпатичный эффект появления текста при наведении на чистом CSS.

Итоговый результат будет выглядеть вот так:

See the Pen pxYLWg by Mohnatus (@mohnatus) on CodePen.

Шаг 1

Сначала создадим контейнер и зададим общие стили:

Мы получили симпатичный небольшой блок с красивым фоном.

Шаг 2

Теперь добавим текст. Изначально на блоке будет отображаться слово «Hello».

Разместим его по центру с помощью абсолютного позиционирования контейнера и флекс-свойств и добавим некоторые стили:

Шаг 3

Теперь добавим слово «World», которое изначально скрыто. При наведении на блок, оно будет эффектно появляться с левой стороны.

Зачем нам такая сложная структура, будет понятно чуть позже.

Добавим стили:

Свойство transition потребуется для плавного изменения свойств.

Для наглядности на скриншоте слово «Hello» скрыто, слово «World» видимо, а все свойства overflow: hidden закомментированы.

Шаг 4

При наведении курсора на блок позиция слова «World» плавно изменяется:

Шаг 5

Для большего эффекта немного уменьшим блок и будем его увеличивать при наведении:

Вот и все, эффект готов.

Этот эффект создан Полом Льюисом:

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован