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

user_1726522 0
Viewed 80

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:

Before clicking

After the click: (Item2 clicked in the example)

After the click

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.

css-position responsive css
2 Answers

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>

user_3837930

Here's an idea:

For each row, you'll have container div for the boxes, and container div for the text content. Each box is related to one text section (by ID, class or whatever). Initially, all the text sections are hidden, and clicking on the box shows corresponding text section.

Absolute position is not needed, and you can use Bootstrap (or some other UI framework) for responsiveness.

The HTML:

<div class="main">
  <div class="row boxes-container">
    <div class="box col-3" data-box="1"></div>
    <div class="box col-3" data-box="2"></div>
    <div class="box col-3" data-box="3"></div>
    <div class="box col-3" data-box="4"></div>
  </div>
 
  <div class="row text-container">
    <div class="text-section col-12" data-text="1">
      Lorem Ipsum
    </div>
    <div class="text-section col-12" data-text="2">
      Lorem Ipsum
    </div>
    <div class="text-section col-12" data-text="3">
      Lorem Ipsum
    </div>
    <div class="text-section col-12" data-text="4">
      Lorem Ipsum
    </div>
  </div>
</div>

user_56815250
Related