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

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

Например, чтобы делать затемнение при наведении на изображение, можно задать свойство opacity равное 1 для прозрачности изображения по умолчанию, а затем при наведении на изображение установить значение opacity равное 0.5 или другому значению по вашему выбору для затемнения:

img {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

img:hover {
  opacity: 0.5;
}

Здесь мы использовали селектор img для выбора всех изображений на странице. Значение opacity: 1 задает изображению полную непрозрачность (не прозрачное), а opacity: 0.5 устанавливает изображению неполную прозрачность (затемнение). Мы также использовали transition для плавного перехода между двумя значениями opacity.

Вы также можете использовать другие CSS-свойства, такие как background-color, вместо opacity для создания эффекта затемнения при наведении. Пример кода для создания затемнения фона элемента при наведении:

.element {
  background-color: #fff;
  transition: background-color 0.5s ease-in-out;
}

.element:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

Здесь мы использовали background-color для установки цвета фона элемента, а также rgba() для создания прозрачности. Значение background-color: rgba(0, 0, 0, 0.5) устанавливает черный цвет фона с прозрачностью 50%, создавая эффект затемнения при наведении на элемент.