Классный эффект появления текста

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

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

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

Шаг 1

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

<div class="reveal">
  
</div>

body {
  display: flex;
  justify-content: center;
  font-family: sans-serif;
}

.reveal {
  position: relative; /* потребуется для позиционирования текста */
  width: 320px;
  height: 180px;
  border-radius: 4px;
  background: url(http://1.bp.blogspot.com/-4HzK341i6Q4/Vg1UtfXLw5I/AAAAAAAAJR0/DkEMpWrpBr0/s1600/Autumn-Leaves-in-sunshine.jpg) center / cover;
  text-transform: uppercase;
  cursor: pointer;
}

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

Шаг 2

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

<div class="reveal">
  <div class="reveal__container">

    <div class="reveal__title">
      Hello
    </div>

  </div>
</div>

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

/* затемненный фон */
.reveal::before {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  top: 10px; bottom: 10px;
  background: black;
  opacity: 0.4;
  box-shadow: 0 0 12px 6px black;
}

.reveal__container {
  position: absolute;
  top: 0; left: 0;
  
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  border-radius: 4px;
}

.reveal__title {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 40px;
  color: white;
  font-weight: bold;
  z-index: 1;
}

Шаг 3

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

<div class="reveal">
  <div class="reveal__container">
    <div class="reveal__title">
      Hello
    </div>
    
    <div class="reveal__title-overlay">
        <div class="reveal__title-overlay-text">
          World
        </div>
     </div> 
    
  </div>
</div>

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

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

.reveal__title,
.reveal__title-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: 40px;
  color: white;
  font-weight: bold;
  z-index: 1;
}

/* коричневый фон */
.reveal__title-overlay {
  overflow: hidden;
  
  top: calc(50% - 50px);
  left: 50%;
  z-index: 2;

  height: 100px;
  width: 405px;
  
  transform: translateX(-150%) skew(-30deg);
  transition: transform 0.4s cubic-bezier(0, 0, 0.3, 1);
  
  background: rgb(32, 6, 6);
  color: white;
  font-size: 50px;
}

/* слово World */
.reveal__title-overlay-text {
  width: 100%;
  text-align: center;
  transform: translateX(100%) skew(30deg);
  transition: transform 0.4s cubic-bezier(0, 0, 0.3, 1);
}

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

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

Шаг 4

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

.reveal:hover .reveal__title-overlay {
  transform: translateX(-50%) skew(-30deg);
}

.reveal:hover .reveal__title-overlay-text {
  transform: skew(30deg);
}

Шаг 5

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

.reveal {
  /*...*/
  
  transform: scale(0.9);
  transition: transform 0.4s cubic-bezier(0, 0, 0.3, 1);
}

.reveal:hover {
  transform: scale(1);
}

.reveal:hover::before {
  transform: translateY(10px);
  opacity: 0.2;
}

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

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