<section class="grid relative">

  <div class="col-6-start-1 z-index-2 bg-red">

    An important block that changes after hovering the mouse cursor

  </div>

  <div class="col-6-start-1 z-index-1 absolute bg-blue">

    The block that appears after hovering the mouse cursor

  </div>

  <div class="col-3 bg-pink">

    Site Element

  </div>

</section>

.grid {

  display: grid;

  grid-gap: 20px;

  grid-template-columns: repeat(9, 1fr);

}

​

.grid div {

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  height: 100px;

  padding: 50px;

​

  color: #f9f9f9;

​

  transition: 0.7s;

}

​

.col-6-start-1 {

  grid-column: 1 / span 6;

}

​

.col-3 {

  grid-column: span 3;

}

​

.relative {

  position: relative;

}

​

.absolute {

  position: absolute;

}

​

.z-index-1 {

  z-index: 1;

}

​

.z-index-2 {

  z-index: 2;

}

​

.bg-red {

  background: #ef5350;

}

​

.bg-blue {

  background: #5c6bc0;

}

​

.bg-pink {

  background: #f06292;

}

​

.z-index-2:hover {

  opacity: 0;

}

​