Яндекс Метрика
CSS hover эффект при наведении

Анимация карточек при наведении мыши с градиентом

Анимация карточек при наведении мыши с градиентом

Анимация карточек при наведении мыши с градиентом

Карточки с градиентом для различных целей. С анимацией выпадания и бликом при наведении.


Полагаю, начать необходимо с самого примера, так и сделаем:

HTML код для описания самой структуры и содержимого

Само описание блока очень простое и не содержит сложного кода:

Первый блок с классом tariffCards описывает сам контейнер, его отступы, размеры и другие параметры.

Второй блок с классом «economy» и другие описывает содержание уже самих карточек. В этот блок вкладывается ссылка, заголовок и описание карточки.

CSS стили для карточек

Перейдём к разбору стилей.

Кто хоть малость знаком с CSS без труда разберется. что скопировать, что поменять по своему назначению. А для тех, кто только вникает в изучение, я расскажу подробнее.

Итак. Представлю сам код:

Итак, класс .tariffCards описывает следующее (опишу только не такие частые, возможно):

  • user-select — это свойство отвечает за поведение выделения текста и других элементов на странице. Устанавливая значение none мы запрещаем выделение текста на наших карточках.
  • transform — это свойство отвечает за трансформацию элемента. Устанавливая значение translate мы сдвигаем элемент в осях на указанное значение.
  • transform-style — нет возможности использовать отдельно от вышеуказанного transform, а отвечает за то, как дочерние элементы должны отображаться в трехмерном пространстве. Ставим значение preserve-3d, что указывает на то, что дочерние элементы будут отображаться в трехмерном пространстве.

hover и after применяете в стандартном их назначении. А стили задаёте по своему вкусу.