CSS brightness() — яскравість елемента

HTML

<div id="description">
  <h2>Приклад 2: зміна яскравості елементу</h2>
  <p>Два однакові елементи, але один з них має змінену яскравість за допомогою функції.</p>
</div>

<div id="result">
  <div class="box"></div>
  <div class="box bright"></div>
</div>

CSS

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

#result {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 150px;
  height: 150px;
  background-color: #ff8c00;
  margin: 20px;
}

.bright {
  filter: brightness(150%);
}

HTML

<div id="description">
  <h2>brightness(): множник, а не «додати світла»</h2>
  <p>Перші чотири плитки одного кольору, п'ята — чорна.</p>
</div>

<div id="result">
  <figure><div class="sw b40"></div><figcaption>brightness(0.4)</figcaption></figure>
  <figure><div class="sw b70"></div><figcaption>brightness(0.7)</figcaption></figure>
  <figure><div class="sw b100"></div><figcaption>brightness(1)</figcaption></figure>
  <figure><div class="sw b150"></div><figcaption>brightness(1.5)</figcaption></figure>
  <figure><div class="sw black"></div><figcaption>чорний + brightness(5)</figcaption></figure>
</div>

<p class="hint">Наведіть курсор на будь-яку плитку — там brightness(1.15) із переходом.</p>

CSS

#result {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

figure {
  margin: 0;
  text-align: center;
  font: 12px/1.4 sans-serif;
}

figcaption {
  margin-top: 8px;
}

.hint {
  font: 13px/1.5 sans-serif;
  color: #495057;
}

.sw {
  width: 110px;
  height: 90px;
  border-radius: 6px;
  background-color: #4c6ef5;
  transition: filter 0.25s;
}

.b40 {
  filter: brightness(0.4);
}

.b70 {
  filter: brightness(0.7);
}

.b100 {
  filter: brightness(1);
}

.b150 {
  filter: brightness(1.5);
}

.black {
  background-color: #000;
  filter: brightness(5);
}

.sw:hover {
  filter: brightness(1.15);
}

HTML

<div id="description">
  <h2>Приклад 1: зміна яскравості картинок при наведенні</h2>
  <p>При наведенні курсору на картинки, їх яскравість змінюється.</p>
</div>

<div id="result">
  <div class="image-container">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 1" class="image image0">
    <div class="caption">20%</div>
  </div>
  <div class="image-container">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 2" class="image image1">
    <div class="caption">40%</div>
  </div>
  <div class="image-container">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зображення 3" class="image image2">
    <div class="caption">80%</div>
  </div>
</div>

CSS

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

#result {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container {
  margin: 20px;
}

.image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  transition: filter 0.3s ease;
}

.image0:hover {
  filter: brightness(20%);
}

.image1:hover {
  filter: brightness(40%);
}

.image2:hover {
  filter: brightness(80%);
}

.image:hover + .caption {
  opacity: 1;
}

.caption {
  opacity: 0;
  text-align: center;
  font-size: 14px;
}