How to implement a smooth change of background images?

Question

css

I'm trying to make a layout that has a slider with images in the background. I did everything, but it's not possible to properly implement the change of images, that's what we have at the moment .
I want one image to dissolve into another. I tried to do it through opacity, but then the entire content of the block disappears.

Answer 1

It is better to do not change the background of one block, but several blocks, each with a unique background. And hide and display blocks to do through a smooth change of opacity.
Like this:

<section id="slider">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-1.jpg"); opacity: 0">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-2.jpg"); opacity: 1">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-3.jpg"); opacity: 0">
  ...прочее содержимое
</section>

Answer 2

How do you want to change slides?