如何在不丢失动画的情况下将线性渐变应用于图像？

Question

This is my code:

HTML:

<div class="hidden">
      <img src="img/homebg/bg2.jpg" />
      <img src="img/homebg/bg3.jpg" />
      <img src="img/homebg/bg4.jpg" />
      <img src="img/homebg/bg5.jpg" />
    </div>

    <div class="slider">
      <div class="container">
        <h1>Мышонок</h1>
      </div>
    </div>

CSS:

/* Slider */
.slider {
  height: 100vh;

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/homebg/bg1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  animation: slide 18s infinite;
  transition: 100ms ease-in-out;
}

.slider h1 {
  color: #fff;
  font-size: 50px;
  padding-top: 40px;
  text-transform: uppercase;
}

.hidden {
  display: none;
}

@keyframes slide {
  0% {
    background-image: url(../img/homebg/bg1.jpg);
  }

  20% {
    background-image: url(../img/homebg/bg2.jpg);
  }
  40% {
    background-image: url(../img/homebg/bg3.jpg);
  }
  60% {
    background-image: url(../img/homebg/bg4.jpg);
  }
  80% {
    background-image: url(../img/homebg/bg5.jpg);
  }
  100% {
    background-image: url(../img/homebg/bg1.jpg);
  }
}

I need every image in keyframe to have also linear-gradient like in .slider image-background, but if I apply it like this :

20% {
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url(../img/homebg/bg2.jpg);
  }

Then I lose the ease-in-out transition. The image just appears instantly at 20%, it does have the gradient, but it does not transition ease-in-out. How to fix this?

Answer 1

Solution:

I just added a div with overlay separately instead of using the linear-gradient property to background-image:

HTML:

<div class="slider">
      <div class="overlay">
        <div class="container">
          <h1>Мышонок</h1>
        </div>
      </div>
    </div>

CSS:

.overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.slider h1 {
  font-family: "Bangers", cursive;
  font-size: 50px;
  color: #fff;
  padding-top: 40px;
  text-transform: uppercase;
  z-index: 1;
}