Как сделать затемнение фотографии при наведении?

Question

Появился вопрос, много гуглил, но что-то не могу сделать. Где-то допускаю ошибку, не пойму как. Нужно сделать затемнение, как на фото. Сейчас - у меня такой код:

.collection__menu {
  align-items: center;
  display: flex;
}

.collection__item {
  text-align: center;
}

.collection__img {
  margin-top: 85px;
  display: block;
  cursor: pointer;
}

.collection__subtitle {
  font-weight: 500;
  font-size: 20px;
  margin-top: 27px;
  margin-bottom: 7px;
}

.collection__sale {
  color: #9C9C9C;
  text-decoration-line: line-through;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-right: 10px;
}

.collection__price {
  color: #998E78;
  font-size: 15px;
  letter-spacing: 0.02em;
}

<div class="col-lg-4">
  <div class="collection__item">
    <img src="img/photo_shop1.png" alt="Фото товара" class="collection__img">
    <a href="#" class="collection__arrow"></a>
    <h3 class="collection__subtitle">Футболка USA</h3>
    <span class="collection__sale">$229</span>
    <span class="collection__price">$129</span>
  </div>

Помогите, пожалуйста!

Answer 1

Используйте filter.

Вот несколько примеров из статьи выше:

.a {
  display: flex;
}

.a div {
  color: red;
  background-color: green;
  margin-right: 20px;
  padding: 20px;
}


/* Затемнение */

.a div:nth-child(1):hover {
  filter: brightness(0.4);
}


/* Насыщеность */

.a div:nth-child(2):hover {
  filter: saturate(30%);
}


/* Контрастность */

.a div:nth-child(3):hover {
  filter: contrast(200%);
}


/* Размытость */

.a div:nth-child(4):hover {
  filter: blur(5px);
}

<div class="a">
  <div>блок</div>
  <div>блок</div>
  <div>блок</div>
  <div>блок</div>
</div>

Вот пример на вашем коде:

.collection__menu {
  align-items: center;
  display: flex;
}

.collection__item {
  text-align: center;
}

.collection__img {
  margin: 85px auto;
  width: 400px;
  display: block;
  cursor: pointer;
  transition: filter 0.2s ease-in-out;
}

.collection__img:hover {
  filter: brightness(0.4);
}

.collection__subtitle {
  font-weight: 500;
  font-size: 20px;
  margin-top: 27px;
  margin-bottom: 7px;
}

.collection__sale {
  color: #9C9C9C;
  text-decoration-line: line-through;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-right: 10px;
}

.collection__price {
  color: #998E78;
  font-size: 15px;
  letter-spacing: 0.02em;
}

<div class="col-lg-4">
  <div class="collection__item">
    <img src="https://s3.nat-geo.ru/images/2019/9/16/e76fafd526144751ab87e72ede9fa762.max-2000x1000.jpg" alt="Фото товара" class="collection__img">
    <a href="#" class="collection__arrow"></a>
    <h3 class="collection__subtitle">Футболка USA</h3>
    <span class="collection__sale">$229</span>
    <span class="collection__price">$129</span>
  </div>

БЛОГ НА HUSL

Как сделать затемнение фотографии при наведении?

Ответы (1 шт):