Как сделать ховер-эффект при наведении мыши на CSS?

Эффект при наведении делается через псевдокласс :hover — он применяет стили, пока курсор над элементом.

.card {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: transform 0.2s, box-shadow 0.2s; /* для плавности */
}

.card:hover {
  transform: translateY(-4px);              /* приподнять */
  box-shadow: 0 8px 20px rgba(0,0,0,.18);   /* усилить тень */
}

<div class="card">Наведи на меня</div>

Пишется как селектор:hover { ... } — это «дельта», которая накладывается поверх обычных стилей при наведении. Менять можно почти всё: цвет, фон, размер, тень, прозрачность.

Ключевая связка — добавить transition на базовом селекторе, иначе эффект будет резким, дёрганым. С переходом получается мягкое «всплывание».

Полезные приёмы:

• подсветка дочернего элемента при наведении на родителя:

.card:hover .title { color: #4f46e5; }

• учтите, что на сенсорных экранах :hover ведёт себя странно (срабатывает «залипанием» после тапа). Поэтому не прячьте важные вещи только за hover — на телефоне до них не добраться. Делайте ховер приятным бонусом, а не единственным способом что-то увидеть.