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

CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом. Для создания эффекта, когда тень появляется при наведении курсора мыши на элемент, необходимо использовать псевдокласс :hover.

Исходный HTML-документ

<div class="box-with-shadow">
  У этого элемента будет тень
</div>

Стили

.box-with-shadow {
  /* Ширина блока */
  width: 250px;
  /* Внутренние отступы */
  padding: 32px;
  /* Цвет фона в элементе */
  background-color: #38d9a9;
  /* Сделаем видимую границу элементу */
  border: 1px solid #333;
}

.box-with-shadow:hover {
  /* Свойство отвечающее за формирование тени 
   8px - отступ по оси Х
   10px - отступ по оси Y
   5px - радиус размытия тения
   2px - радиус распространения
   rgba - функция формирующая цвет тени
  */
  box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2);
}

Чтобы добавить тень при наведении на элемент, можно использовать псевдокласс :hover и свойство box-shadow:

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  transition: box-shadow 0.3s; /* Добавим плавный переход */
}

.box:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Горизонтальное смещение, вертикальное смещение, размытие и цвет*/
}

Свойство box-shadow принимает несколько значений: горизонтальное смещение, вертикальное смещение, размытие и цвет тени. В примере тень будет иметь горизонтальное и вертикальное смещение 0, размытие 10px и черный цвет с прозрачностью 0.5. Также добавлено свойство transition для создания плавного эффекта изменения тени.