Как сделать тень при наведении css

Чтобы сделать тень при наведении в CSS, можно использовать псевдоэлементы :hover.

1. Добавьте стили для элемента, на который нужно добавить тень:

.box {
  width: 200px;
  height: 200px;
  background-color: #eee;
  transition: box-shadow 0.3s ease;
}

Здесь мы задаем ширину и высоту элемента, его фоновый цвет и добавляем анимацию при изменении свойства box-shadow с помощью transition.

2. Добавьте стили для псевдоэлемента :hover, чтобы добавить тень при наведении:

.box:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Здесь мы задаем свойство box-shadow со значением тени, которую нужно добавить при наведении на элемент.

Можно настроить свойства тени, задавая значения для горизонтального и вертикального смещения, размытия, цвета и прозрачности. Например:

.box:hover {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

Здесь мы задаем горизонтальное смещение 2px, вертикальное смещение 2px, размытие 10px, цвет тени черный и прозрачность 0.5.

Таким образом, при наведении на элемент с классом .box добавляется тень с помощью свойства box-shadow.