アニメーションのスライドをコンテンツの背景に指定したい

コーディング初心者です。

https://codepen.io/commte/pen/9cea425c37d39a2327fe28ee0c0b1d58

上記の用な交互にズームインとズームアウトを繰り返し表示するアニメーションのスライドを、
コンテンツの背景に指定する方法が知りたいです。

上記のサンプルだとスライド<div class="slider_css"> の上に
タイトル（ヘッダーの要素）やコンテンツを載せる方法がわかりません。
positionを使えば解決するのでしょうか？？

実現できればjQueryなどでも構いません。
背景がズームせずスライドするjQueryの例は何件か見つけられたのですが、、
わかりずらくて、申し訳ありませんがよろしくお願いいたします。

<!-- 参考にしたサンプルのHTML -->
<div class="slider_css">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

/* 参考にしたサンプルのCSS */
@mixin bp {
  @media only screen and (max-width: 768px) {
    @content;
  }
}
.slider_css {
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      background-size: cover;
      width: 100%;
      height: 550px;
      position: absolute;
      top: 0;
      left: 0;
      animation-iteration-count: infinite;
      animation-duration: 40s;
      @for $value from 1 through 5 {
        &:nth-child(#{$value}) {
          background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg");
          @if $value % 2 == 0 {
            //偶数
            animation-name: slider-zoomout;
          }
          @else {
            //奇数
            animation-name: slider-zoomin;
          }
          @if $value != 1 {
            //最初以外は透過
            opacity: 0;
          }
          animation-delay: #{($value*8-11)}s; //-3からスタートして、8づつ加算する
        }
      }
      img {
        width: 130%;
      }
    }
  }

  @include bp {
    height: 400px;
    ul {
      li {
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1.0);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じですかね。
positionですね。

html
1<div class="slider_css">
2  <ul>
3    <li></li>
4    <li></li>
5    <li></li>
6    <li></li>
7    <li></li>
8  </ul>
9</div>
10<div class="content_area">
11  <div class="title">Title</div>
12  <div class="content_box"></div>
13</div>

css
1/* body背景追加 */
2body {
3  background: #dfdfdf;
4}
5.slider_css {
6  height: 550px;
7  margin: 0 auto;
8  position: relative;
9  overflow: hidden;
10  z-index: 0;/* 追加 */
11  ul {
12   ....
13  }
14}
15
16/* ここから追加 */
17.content_area {
18  position: absolute;
19  top: 0;
20  width: 100%;
21}
22.title {
23  margin: 20px 0 150px 20px;
24  font-size: 30px;
25}
26.content_box {
27  background: #fff;
28  height: 1000px;
29  width: 800px;
30  margin: auto;
31}