How to translate a whole column on the y axis

Question

I have this grid view , I need to translate the items of the second column on the y axis as you see in the image, I tried to do it using translateY() but it will require you to scroll in order to see the translated items but I don't want any kind of scroll actions.

Design sample

Answer 1

Grid is a grid line/cols, meaning cells are aligned.

if you want this translate, you have first to define a grid. Make the even cell relative, and the div inside this cell absolute. On it you can apply the translate.

* {
  margin: 0;
  padding: 0;
  color: #FFFFFF;
  background-color: #131313;
  font-family: sans-serif;
}

#container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
}

#container>div {
  min-height: 300px;
  position: relative;
  padding: 1em;
}

#container>div:nth-child(even)>div {
  background-color: lightgrey;
  position: absolute;
  width: calc(100% - 2em);
  transform: translateY(100px);
  z-index: 1;
}

#div1 {
  background-color: rgba(128, 135, 81, 0.5);
}

#div2 {
  background-color: rgba(147, 0, 65, 0.5);
}

#div3 {
  background-color: rgba(111, 6, 26, 0.5);
}

#div4 {
  background-color: rgba(37, 65, 97, 0.5);
}

<div id="container">
  <div id="div1">
    <div>
      <img src="https://picsum.photos/id/237/200/200">
      <br> Urna neque viverra justo nec. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Viverra aliquet eget sit amet tellus. Nullam non nisi est sit amet. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Dapibus ultrices
      in iaculis nunc. Suspendisse potenti nullam ac tortor.
    </div>
  </div>
  <div id="div2">
    <div>
      <img src="https://picsum.photos/id/124/200/200">
      <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
  <div id="div3">
    <div>
      <img src="https://picsum.photos/id/87/200/200">
      <br> Nisl nisi scelerisque eu ultrices vitae. Erat pellentesque adipiscing commodo elit at imperdiet dui. Nulla facilisi cras fermentum odio eu. At imperdiet dui accumsan sit amet nulla facilisi. Ullamcorper sit amet risus nullam eget felis. Ultrices
      sagittis orci a scelerisque purus semper eget duis. Eu facilisis sed odio morbi. Dui accumsan sit amet nulla. Quisque id diam vel quam elementum pulvinar etiam non. Praesent semper feugiat nibh sed pulvinar proin gravida.
    </div>
  </div>
  <div id="div4">
    <div>
      <img src="https://picsum.photos/id/111/200/200">
      <br> In hac habitasse platea dictumst quisque sagittis purus sit amet. Ut diam quam nulla porttitor. Sit amet consectetur adipiscing elit ut aliquam purus sit. Malesuada pellentesque elit eget gravida cum sociis. Eu nisl nunc mi ipsum faucibus vitae
      aliquet. Sit amet volutpat consequat mauris nunc congue nisi. Libero justo laoreet sit amet.
    </div>
  </div>
</div>