How can I display a hidden container within a flex scenario which covers the whole width of the screen?

Screenshot of the desired outcome:

I'm trying to find a css-flex-based solution to display additional information to a given set of layers in an extra row. (see the attached image for the nice idea the designer had).

If any of the images or layer in a row are clicked on, the additional layer connected to the image with (e.g. a larger images and some text should appear in a new row). This row should use the full width of the surrounding flex-container.

Scenario to make it a bit more clear:

I have a collection of portraits displayed. Thanks to flexbox they are moving nicely and fit in the available space. A click on one of the portraits opens up a new row filled with content connected to the clicked portrait, e.g. the name, a bigger image, etc.

Now I can't seem to get the "information layer" to extend past the original div.

This is the code I have so far:

  /* Anordnung der Bildkacheln mithilfe von flexbox */
  .image-grid {
    display: flex;
    justify-content: space-between;
      flex-flow: row wrap;
      align-content: stretch;
      align-items: stretch;
    max-width: 1000px;
  }
  .image-tile {
    flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 150px;
      margin: 0 12px 24px;
      flex-flow: row wrap;
      align-content: flex-start;
  }
  .image-tile img {
    width: 100%; /* Anpassung der Bildgröße an den Container */
    height: auto;
    object-fit: cover; /* Anpassung des Bildes an die Größe des Containers */
  }

  /* Zusatzinformationslayer */
  .image-info {
        display: none; /* Standardmäßig ausgeblendet */
    //position: absolute;
    text-align: center;
    border: 1px solid green;
  }

  .image-tile:hover .image-info {
        display: block; /* Anzeigen bei Hover */

  }

<html>
<head></head>
<body>

<style>

</style>

<div class="image-grid">
  <!-- Bildkachel -->
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/000/fff" alt="Bild 1">
    <div class="image-info">
        Zusatzinformationen über Bild 1</br>
    Zusatzinformationen über Bild 1</br>
    Zusatzinformationen über Bild 1</br>
    Zusatzinformationen über Bild 1</br>
    Zusatzinformationen über Bild 1</br>
    </div>
  </div>

  <!-- Weitere Bildkacheln -->
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/1124d4/fff" alt="Bild 2">
    <div class="image-info">
<img src="download.png" alt="Bild 2">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/000/1124d4" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>

</div>
</body>
</html>

Solution

You can set the CSS by adjusting the margin for each element of the three column as below:

/* It will take the whole width for every element in the 1st column */
.image-tile:nth-child(3n+1):hover .image-info {
  margin-right: calc(-48px - 200%);
}
/* It will take the whole width for every element in the 2nd column */
.image-tile:nth-child(3n+2):hover .image-info {
  margin-left: calc(-24px - 100%);
  margin-right: calc(-24px - 100%);
}
/* It will take the whole width for every element in the third column */
.image-tile:nth-child(3n):hover .image-info {
  margin-left: calc(-48px - 200%);
}

The 48px is equal the 4 * 12 px margin from the element on the right we need to cancel, while the 200% are the width of the 2 columns on the right, which contain the pictures.

So after you just need to adjust the math based on your column, but I would advice you to adjust the size of the grid based on the screen size, here I set max-width to 600px instead of 1000px to keep it on three columns.

And here is the doc for the :nth-child selectors

Demo

/* Anordnung der Bildkacheln mithilfe von flexbox */
  .image-grid {
    display: flex;
    justify-content: space-between;
      flex-flow: row wrap;
      align-content: stretch;
      align-items: stretch;
    max-width: 600px; /* 1000px originaly */
  }
  .image-tile {
    flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 150px;
      margin: 0 12px 24px;
      flex-flow: row wrap;
      align-content: flex-start;
  }
  .image-tile img {
    width: 100%; /* Anpassung der Bildgröße an den Container */
    height: auto;
    object-fit: cover; /* Anpassung des Bildes an die Größe des Containers */
  }

  /* Zusatzinformationslayer */
  .image-info {
        display: none; /* Standardmäßig ausgeblendet */
    //position: absolute;
    text-align: center;
    border: 1px solid green;
  }

  .image-tile:hover .image-info {
        display: block; /* Anzeigen bei Hover */

  }
  /* It will take the whole width for every element in the 1st column */
  .image-tile:nth-child(3n+1):hover .image-info {
        margin-right: calc(-48px - 200%);
  }
  /* It will take the whole width for every element in the 2nd column */
  .image-tile:nth-child(3n+2):hover .image-info {
        margin-left: calc(-24px - 100%);
        margin-right: calc(-24px - 100%);
  }
  /* It will take the whole width for every element in the third column */
    .image-tile:nth-child(3n):hover .image-info {
        margin-left: calc(-48px - 200%);

  }

<html>
<head></head>
<body>

<style>

</style>

<div class="image-grid">
  <!-- Bildkachel -->
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/000/fff" alt="Bild 1">
    <div class="image-info">
        Zusatzinformationen über Bild 1<br>
    Zusatzinformationen über Bild 1<br>
    Zusatzinformationen über Bild 1<br>
    Zusatzinformationen über Bild 1<br>
    Zusatzinformationen über Bild 1<br>
    </div>
  </div>

  <!-- Weitere Bildkacheln -->
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/1124d4/fff" alt="Bild 2">
    <div class="image-info">
<img src="download.png" alt="Bild 2">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="https://dummyimage.com/600x400/000/1124d4" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 2">
    <div class="image-info">
      Zusatzinformationen über Bild 2
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 3">
    <div class="image-info">
      Zusatzinformationen über Bild 3
    </div>
  </div>
  <div class="image-tile">
    <img src="download.png" alt="Bild 4">
    <div class="image-info">
      Zusatzinformationen über Bild 4
    </div>
  </div>

</div>
</body>
</html>