How can I show the caption of a single grid item over the full width of the next row?

In a webpage, I want to display several Items. When user clicks any of those Items, some text with explanation is shown. The graphic schema is as follows (each colored square will be a photo).

Initial state:

After the click: (Item2 clicked in the example)

As can be seen, I want the text with the explanation to occupy all the width of the container, and the second row of images to move down (as wel of all other content, including footer). I also want this schema to be responsive, i.e. on mobile devices instead of four items in a row there will be only one.

I've been dealing with this for a couple of days, and one of my approaches was to set four divs (for first row elements) stacked one over the other using position: absolute;. Each of those divs contains the photo (positioned with left: 0%, left: 25%, left: 50% and left: 75%) and the corresponding text. But my problem is that with position: absolute the content of the div do not occupy space, so I cannot 'move down' the rest of the content after clicking. Another approach was to set the div for displaying the text after the four clickeable images. My problem in this case is with mobile devices: on mobile devices I obviously want the text to be display below the corresponding image, not four images away.

Does anybody have a tip for where to begin? Not a full code of course, but just a basic idea/approach.

Solution

You can have your figures automatically positioned with a wrapping flex row. And just have the captions positioned absolute to the left of the container. Set enough bottom margin on the selected element. I've used :hover here to select. But you can use a real class and set it with javascript if you want.

.container {
 counter-reset: fig-count 0;
 display: flex;
 flex-wrap: wrap;
}

figure {
  counter-increment: fig-count 1;
}

figure:after {
  content: "Item " counter(fig-count);
  display: block;
  text-align: center;
  font-size: smaller;
}

figcaption:before {
  content: "Item " counter(fig-count) ": ";
  font-size: smaller;
}

figcaption {
  align-self: flex-start;
  width: 100%;
  position: absolute;
  left: 0;
  height: 100px;
  display: none;
  padding: 3ex;
}

figure:hover {
  margin-bottom: 100px;
}

figure:hover figcaption {
  display: block;
}

<div class="container">
  <figure>
    <img src="https://picsum.photos/seed/1/200">
    <figcaption>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.</figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/seed/2/200">
    <figcaption>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.</figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/seed/3/200">
    <figcaption>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.</figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/seed/4/200">
    <figcaption>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.</figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/seed/5/200">
    <figcaption>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.</figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/seed/6/200">
    <figcaption>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.</figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/seed/7/200">
    <figcaption>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.</figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/seed/8/200">
    <figcaption>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.</figcaption>
  </figure>
</div>