Блог

Главная - Вопросы по программированию - Слайд фильтра вверх по img

Слайд фильтра вверх по img

#html #css

#HTML #css

Вопрос:

У меня есть изображение, к которому я применил фильтр в css, настолько серое, что я бы хотел, чтобы это изображение меняло цвет, поднимаясь вверх.

Я также хотел бы, чтобы эта анимация выполнялась автоматически

CSS :

     img{ 
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
    transition: all .3s ease-out;
}

img:hover{
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
    transition: all .3s ease-out;
}

Комментарии:

1. я не понимаю, извините, мое изображение серое, и я бы хотел, чтобы оно меняло цвет снизу вверх

Ответ №1:

Вы можете рассмотреть градиентный слой в верхней части изображения и выбрать режим смешивания для создания эффекта оттенков серого, а затем анимировать его положение для создания эффекта слайда:

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

img {
  display: block;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  background:linear-gradient(black 45%,transparent 55%);
  mix-blend-mode:color;
  transition:1s;
}
.box:hover::after  {
  transform:translateY(-50%);
} 
 <div class="box">
  <img src="https://picsum.photos/id/1/200/200">
</div>

<div class="box">
  <img src="https://picsum.photos/id/108/200/200">
</div>

<div class="box">
  <img src="https://picsum.photos/id/1068/200/200">
</div>

background-filter также может это сделать:

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

img {
  display: block;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  backdrop-filter:grayscale(1);
  transition:1s;
}
.box:hover::after  {
  transform:translateY(-100%);
} 
 <div class="box">
  <img src="https://picsum.photos/id/1/200/200">
</div>

<div class="box">
  <img src="https://picsum.photos/id/108/200/200">
</div>

<div class="box">
  <img src="https://picsum.photos/id/1068/200/200">
</div>

Комментарии:

1. спасибо, как я могу запустить эту анимацию автоматически?

2. @Mcalan используйте ключевые кадры: developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

3. хорошо, спасибо, есть ли решение, чтобы сделать мое изображение еще темнее?

4. @Mcalan к последнему решению вы можете добавить фон, например background: rgba(0,0,0,0.5);

5. Я использовал background, и у меня не было желаемого результата zupimages.net/up/21/04/p9nn.png

Метки: