Блог

Главная - Вопросы по программированию - Сделайте так, чтобы фильтр отображался слева направо

Сделайте так, чтобы фильтр отображался слева направо

#css #reactjs

Вопрос:

Я хотел бы применить фильтр к изображению, чтобы сделать переход от серого к цвету слева направо. На данный момент у меня есть только фильтр, примененный ко всем изображениям одновременно.

Возможно ли это с помощью css ?

Это небольшая репродукция

Ответ №1:

Вот, держи…

 .img {
  width: 340px;
  display: block;
}

.filter {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.filter:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  animation: from_left 1s ease-in-out forwards;
  animation-delay: 1s;
  mix-blend-mode: color;
  background: linear-gradient(gray, gray);
}

@keyframes from_left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
} 
 <!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>

<body>

  <div class='filter'>
    <img class='img' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg' alt='Bridge'>
  </div>

</body>

</html>
Метки: ,