CodePen Embed - vYQNYVE

<div id="description">
  <h2>Приклад 2</h2>
  <p>Перше зображення - оригінальне, друге та третє - з функцією grayscale(),а точніше 50% й 100% відповідно.</p>
</div>

<div id="result">
  <img src="https://picsum.photos/200/200" alt="Зображення 1" class="image image0">
  <img src="https://picsum.photos/200/200" alt="Зображення 2" class="image image1">
  <img src="https://picsum.photos/200/200" alt="Зображення 3" class="image image2">
</div>

#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

.square:first-child {
  background-color: #4d4d4d;
}

.image0 {
  filter: grayscale(0%);
}

.image1 {
  filter: grayscale(50%);
}

.image2 {
  filter: grayscale(100%);
}

This Pen is owned by BonD007 on CodePen.

See more by @BonD007-the-flexboxer on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.