<div id="description">
  <h2>Приклад 2: зміна сепії картинки</h2>
  <p>Три картинки з різними значеннями функції sepia().</p>
</div>

<div id="result">
  <div class="image-container">
    <img class="image image0" src="https://picsum.photos/200/200" alt="Зображення 1">
    <p class="value">sepia(0.15)</p>
  </div>
  <div class="image-container">
    <img class="image image1" src="https://picsum.photos/200/200" alt="Зображення 2">
    <p class="value">sepia(0.45)</p>
  </div>
  <div class="image-container">
    <img class="image image2" src="https://picsum.photos/200/200" alt="Зображення 3">
    <p class="value">sepia(1)</p>
  </div>
</div>

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

.image-container {
  display: inline-block;
  text-align: center;
  margin-right: 20px;
}

.image {
  width: 200px;
  height: 200px;
}

.value {
  margin-top: 10px;
  font-family: Arial, sans-serif;
}

.image0 {
  filter: sepia(0.15);
}

.image1 {
  filter: sepia(0.45);
}

.image2 {
  filter: sepia(1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.