Как реализовать эффект приподнятой карточки

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

Для реализации эффекта приподнятой карточки используем CSS-переходы. Основные элементы:

1. transform: translateY() - поднимает элемент по вертикали
2. box-shadow - добавляет тень для усиления эффекта глубины
3. transition - плавно анимирует изменения

Дополнительно можно добавить:

• Разные значения тени для большего реализма
• Задержку перехода (transition-delay)
• Изменение z-index при hover для работы с наложением элементов

Пример с улучшенной тенью:

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}