How would you build this?

[bernhard]

I just had a look at an old site that I built for an agency and cannot share unfortunately. But I'd be interested in how that design pattern could have been built in a better way. I know it was more complicated than I first thought, because there are some challenges in this simple looking design:

• The grid was done using UIkit grid, the dropdown bubble was done using an UIkit accordion. So far so simple.
• Problem 1: Where to place the bubble in the markup? In the sown example (on desktop) it has to be after the third image. On mobile it's after each image.
• Problem 2: How to position the pointer properly in the center of the clicked image.

Of course the team-page had more than just 3 images. So after the bubble the next row of images was shown.

Is there a simple CSS-only solution? I can remember I hacked something together with some JS. It worked, but it was not really elegant. I think I saw a video on youtube the other day, but I can't remember ?

Any tipps would be appreciated ? 

[da²]

Hello,

I would probably use an absolute positioning for the drop-down, so it works fine on all screens. Pushing the content following this box doesn't look like the good choice to me. And on mobile there probably are screen sizes where you won't be able to see photo and description at the same time.

[monollonom]

If your layout remains like this (3 per row) with maybe one breakpoint for mobile you could do something like this:

<div class="team">
	<div class="team_member">
		<img class="team_image" src="/path/to/image" onclick="this.nextElementSibling.classList.toggle('team_about--opened')" />
    	<div class="team_about">
        	<!-- content -->
    	</div>
	</div>
  	<div class="team_member">
		<!-- repeat -->
	</div>
  	<div class="team_member">
		<!-- repeat -->
	</div>
</div>

CSS (non-tested, overly simplified and missing things, like accounting for the gap in the grid...):

.team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.team_about {
	width: 300%;
	height: 0;
	position: relative;
	background-color: blue;
}

.team_about:nth-child(3n + 2) { /* every 2nd element per row */
	left: -33.333%;
}

.team_about:nth-child(3n + 3) { /* every 3rd element per row */
	left: -66.666%;
}

.team_about--opened {
	height: auto;
}

.team_about::before { /* arrow */
	content: "";
	display: block;
	margin-left: -10px;
	position: absolute;
	bottom: 100%;
	left: 25%;
	border: 10px solid transparent;
	border-bottom-color: blue;
}

.team_about:nth-child(3n + 2)::before {
	left: 50%;
}

.team_about:nth-child(3n + 3)::before {
	left: 75%;
}

Basically the idea is to have the dropdown within the team member’s div so that when you open it it adds to the parent’s height (thus pushing the next line) and then you account for the offset by using position: relative. This is ok for such case where the layout is well defined but it doesn’t “scale” well if you decide to have 4/5/... members per row. However this is me not using any preprocessor but since I know you’re using Less (or Sass?) maybe you could easily write a function generating the necessary CSS based on the number per row.

(in my example, JS is necessary to add the "team_about--opened" class, but you could do something with pure HTML/CSS using the amazing details tag)