Затемнение фотографий онлайн и бесплатно

Затемнение фото можно осуществить с помощью CSS-свойства filter и псевдоэлемента ::before. Пример кода для затемнения фото на 50%:

HTML:

CSS:

.photo {
  position: relative;
}
.photo::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.photo img {
  filter: brightness(0.5);
}

В данном примере мы добавляем псевдоэлемент ::before, который занимает всю область родительского элемента и имеет полупрозрачный фон черного цвета с помощью свойства background-color и значения rgba(0, 0, 0, 0.5), где 0.5 – это прозрачность.

Для затемнения фото мы используем свойство filter и значение brightness(0.5), которое уменьшает яркость изображения на 50%.

Этот пример можно доработать, например, добавив показ имени фото при наведении на нее мышью с помощью псевдоэлемента ::after. Пример кода:

CSS:

.photo::before {
  /* код как раньше */
}
.photo:hover::after {
  content: attr(data-title);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.2rem;
}
.photo img {
  /* код как раньше */
}

Здесь мы добавляем псевдоэлемент ::after, который появляется при наведении на фото мышью. С помощью свойства content и функции attr(data-title) мы задаем значение для псевдоэлемента, которое берется из атрибута data-title у родительского элемента. С помощью других свойств мы задаем расположение и стиль для псевдоэлемента.