Красивый hover эффект для карточки на сайте на чистом CSS

В данной записи мы опять рассмотрим интересную реализацию карточки на сайте. Анимация срабатывает при наведение курсора на элемент. Демонстрация этого эффекта ниже.

HTML

Здесь 3 основных элемента:
card-container — это основной контейнер внутри которого находится вся информация.
card--display — внутри находится информация которая будет выводиться на лицевой стороне блока.
card--hover — здесь находится информация которая будет выводиться при наведение курсора на элемент.

<div class="card-container">
       <div class="card">
           <a href="" class="hottub">
               <div class="card--display">
                   <i class="material-icon">PROG-TIME</i>
                   <h2>Делаем необычную анимацию для карточки</h2>
               </div>
               <div class="card--hover">
                   <h2>Внимание</h2>
                   <p>Весь код представленный в видео находится на сайте prog-time.ru. Ссылка на запись в описание.</p>
               </div>
           </a>
           <div class="card--border"></div>
       </div>
   </div>