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

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

  1. Добавьте стили для элемента, на который нужно добавить тень:
.box {
  width: 200px;
  height: 200px;
  background-color: #eee;
  transition: box-shadow 0.3s ease;
}

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

  1. Добавьте стили для псевдоэлемента :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.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать тень при наведении css

Наш специалист свяжется с вами в ближайшее время и уточнит детали