Creating this type of grid

Question

Im trying to do the same as this https://preview.themeforest.net/item/bifrost-simple-portfolio-wordpress-theme/full_screen_preview/23180008?_ga=2.237989248.1048977887.1575564352-946865638.1575563085 and I cant seem to get it well done.

It works with this code on a height of 100vh

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #000000;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
  color: green;
}

.container-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
  max-width: 800px;
  margin: 0 auto;
  border: 2px solid green;
  border-top: none;
  border-bottom: none;
}

.container-box-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.container-box-top-first {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  height: 24.9vh;
  border: 2px solid green;
  border-top: none;
}

.container-box-top-second {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  height: 24.9vh;
  border: 2px solid green;
  border-top: none;
}

.container-box-top-third {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33.33%;
  height: 24.9vh;
  border: 2px solid green;
  border-top: none;
}

.container-box-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.container-box-bottom-first {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 24.9vh;
  border: 2px solid green;
  border-bottom: none;
}

.container-box-bottom-second {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 24.9vh;
  border: 2px solid green;
  border-bottom: none;
}

.container-box-top-first-hover-image-1 {
  display: none;
}

.container-box-top-second-hover-image-1 {
  display: none;
}

.container-box-top-third-hover-image-1 {
  display: none;
}

.container-box-bottom-first-hover-image-1 {
  display: none;
}

.container-box-bottom-second-hover-image-1 {
  display: none;
}

.container-box-top-first {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

body:not(.mobile) .container-box-top-first:hover+.container-box-top-first-hover-image-1 {
  display: flex;
  pointer-events: none;
}

.container-box-top-first-hover-image-1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 2s ease-in-out;
  width: 100%;
}

.container-box-top-first-hover-image-1 img {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 50vh;
}

.container-box-top-second {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

body:not(.mobile) .container-box-top-second:hover+.container-box-top-second-hover-image-1 {
  display: flex;
  pointer-events: none;
}

.container-box-top-second-hover-image-1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 2s ease-in-out;
  width: 100%;
  height: 100%;
}

.container-box-top-second-hover-image-1 img {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 50vh;
}

.container-box-top-third {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

body:not(.mobile) .container-box-top-third:hover+.container-box-top-third-hover-image-1 {
  display: flex;
  pointer-events: none;
}

.container-box-top-third-hover-image-1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 2s ease-in-out;
  width: 100%;
  height: 100%;
}

.container-box-top-third-hover-image-1 img {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 50vh;
}

.container-box-bottom-first {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

body:not(.mobile) .container-box-bottom-first:hover+.container-box-bottom-first-hover-image-1 {
  display: flex;
  pointer-events: none;
}

.container-box-bottom-first-hover-image-1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 2s ease-in-out;
  width: 100%;
  height: 100%;
}

.container-box-bottom-first-hover-image-1 img {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 50vh;
}

.container-box-bottom-second {
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

body:not(.mobile) .container-box-bottom-second:hover+.container-box-bottom-second-hover-image-1 {
  display: flex;
  pointer-events: none;
}

.container-box-bottom-second-hover-image-1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 2s ease-in-out;
  width: 100%;
  height: 100%;
}

.container-box-bottom-second-hover-image-1 img {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 50vh;
}

<div class="container" style="background-image: url(goku.jpg); background-size: cover; background-position: center; background-attachment: fixed;">
  <div class="container-box">
    <div class="container-box-top">
      <div class="container-box-top-first">
        <div class="container-box-top-first-title">
          <h2>Idea</h2>
        </div>
      </div>
      <div class="container-box-top-first-hover-image-1">
        <img src="img1.jpg" alt="">
      </div>
      <div class="container-box-top-second">
        <div class="container-box-top-second-title">
          <h2>Diseño</h2>
        </div>
      </div>
      <div class="container-box-top-second-hover-image-1">
        <img src="img2.jpg" alt="">
      </div>
      <div class="container-box-top-third">
        <div class="container-box-top-third-title">
          <h2>Producción</h2>
        </div>
      </div>
      <div class="container-box-top-third-hover-image-1">
        <img src="img3.jpg" alt="">
      </div>
    </div>
    <div class="container-box-bottom">
      <div class="container-box-bottom-first">
        <div class="container-box-bottom-first-title">
          <h2>Logística</h2>
        </div>
      </div>
      <div class="container-box-bottom-first-hover-image-1">
        <img src="img4.jpg" alt="">
      </div>
      <div class="container-box-bottom-second">
        <div class="container-box-bottom-second-title">
          <h2>Implementación</h2>
        </div>
      </div>
      <div class="container-box-bottom-second-hover-image-1">
        <img src="img5.jpg" alt="">
      </div>
    </div>
  </div>
</div>

But once you put it with other stuff in the body and you have to scroll down on the page, the images on hover stay fixed and move with the scroll and I cant get it done.

Any help please?

Thanks!

---

Heres my jsfiddle jsfiddle.net/mcostam1985/1nxjfug8/2 . What I want is that to work well when you scroll down throught the page. If you dont have to scroll down and you see just this, its okay, but if you have it in another section of the page the images of hover on the text that appear in the background stay fixed on scroll. Thank you all

Answer 1

It can be done with css Grid in minimum code

display: grid;
/* Here its make horizontal grid of 4 taking 1fr space   */
grid-template-columns: repeat(4, 1fr);  

<style>
  .container{
    background:#f2f2f2;
    padding: 10px;
}

.container .grids{
  width:100%;
  min-height:100vh;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4em;
  
  }
  
  .grids .box{
    width:200px;
    height:200px;
    background: #444;
  }
</style>

    <div class="container">
      <div class="grids">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>