Team Accordion Gallery

Highlight your team members with an accordion gallery layout. Learn how to create an interactive accordion-style gallery to showcase team members' profiles and achievements.

Add an interactive and visually appealing Team Accordion Gallery to your website using HTML and CSS. This tutorial provides a step-by-step guide to implement and customize the gallery, allowing you to highlight your team members with ease.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet for the Team Accordion Gallery. This includes the structure and styles needed to create a responsive and interactive gallery. Simply select the code, click the copy button, and paste it into your project files.

Step 2: Link CSS

  • Ensure the necessary CSS file is linked correctly in your HTML document. Add the following <link> tag in the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">
  • Replace "styles.css" with your actual CSS file name if different.

Step 3: Customize and Make it Yours

  • Personalize the Team Accordion Gallery to match your website's design and content. Modify the CSS styles to adjust the gallery's appearance, animation effects, and interaction behaviors. Experiment with different colors, fonts, and transition effects to create a unique presentation for your team members.

Code Explanation

HTML Code

Main Container (<ul class="accordion">):
  • The entire accordion is wrapped in an unordered list (<ul>) with the class accordion.
Accordion Items (<li>):
  • Each list item (<li>) represents a single accordion item.
  • Each item contains an image and a content div.
Images (<img>):
  • Each list item contains an <img> element with a src attribute pointing to an image URL. These images serve as visual representations or avatars for each accordion item.
Content (<div class="content">):
  • Each list item also contains a div with the class content.
  • Inside the div, there is a span that wraps a heading (<h2>) and a paragraph (<p>).
Text Content:
  • The <h2> element contains the name of the individual (e.g., Carmen Rios).
  • The <p> element contains the job title or role of the individual (e.g., Frontend).
First Accordion Item
<li>
  <img src="https://github.com/frontend-joe/css-accordions/blob/main/accordion-1/img1.jpg?raw=true" />
  <div class="content">
    <span>
      <h2>Carmen Rios</h2>
      <p>Frontend</p>
    </span>
  </div>
</li>
  • This item displays an image (presumably of Carmen Rios).
  • It has a div containing a span, which includes:
  • A h2 element with the text "Carmen Rios".
  • A p element with the text "Frontend".
Second Accordion Item
<li>
  <img src="https://github.com/frontend-joe/css-accordions/blob/main/accordion-1/img2.jpg?raw=true" />
  <div class="content">
    <span>
      <h2>Lisa Scott</h2>
      <p>Backend</p>
    </span>
  </div>
</li>
  • This item displays an image (presumably of Lisa Scott).
  • It has a div containing a span, which includes:
  • A h2 element with the text "Lisa Scott".
  • A p element with the text "Backend".

CSS Code

General Styles
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • Resets the default margin and padding for all elements.
  • Uses box-sizing: border-box to include padding and border in the element's total width and height.
Body Styles
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #3a3544;
  text-align: center;
  font-family: "Euclid Circular A", "Poppins";
}
  • Ensures the body takes at least the full viewport height (100vh).
  • Centers content both horizontally and vertically using Flexbox.
  • Sets a dark background color (#3a3544).
  • Centers text and sets the font family to "Euclid Circular A" and "Poppins".
Accordion Styles
.accordion {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 400px;
  gap: 16px;
  transition: 0.3s;
}
.accordion:hover {
  gap: 0;
}
  • Sets the accordion to be a flex container that centers its children.
  • Sets the height of the accordion to 400px and the width to 100%.
  • Adds a gap of 16px between accordion items.
  • Reduces the gap to 0 when the accordion is hovered over.
Accordion Item Styles
.accordion li {
  position: relative;
  overflow: hidden;
  flex: 0 0 80px;
  border-radius: 50px;
  opacity: 0.75;
  cursor: pointer;
}
.accordion li:hover {
  flex: 0 1 260px;
  scale: 1.1;
  z-index: 10;
  opacity: 1;
}
  • Sets each accordion item (<li>) to be 80px wide initially and have a border radius of 50px.
  • Makes each item relatively positioned and hides overflow content.
  • Sets the opacity to 0.75 and adds a pointer cursor.
  • When hovered, the item expands to 260px wide, scales up to 1.1, moves to the top layer (z-index: 10), and becomes fully opaque (opacity: 1).
Image Styles
.accordion li img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5);
}
  • Absolutely positions the image in the center of the list item.
  • Sets the image to cover the entire list item without distortion.
  • Applies a grayscale filter to the image.
Content Styles
.accordion li .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: #fff;
  padding: 15px;
  background: linear-gradient(
    0deg,
    rgb(0 0 0 / 70%) 10%,
    rgb(255 255 255 / 0%) 100%
  );
  opacity: 0;
  visibility: hidden;
}
.accordion li:hover .content {
  opacity: 1;
  visibility: visible;
}
  • Absolutely positions the content to cover the entire list item.
  • Sets a dark gradient background and makes the content initially invisible and transparent.
  • When hovered, the content becomes fully visible and opaque.
Text Content Styles
.accordion li .content span {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 50px;
  translate: -300px 0;
  visibility: hidden;
  opacity: 0;
}
.accordion li:hover span {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
}
.accordion h2 {
  font-weight: 400;
  font-size: 24px;
  line-height: 45px;
  border-bottom: 2px solid #fff;
  margin-bottom: 10px;
  white-space: nowrap;
}
  • Absolutely positions the span element within the content, initially translating it out of view and making it invisible and transparent.
  • When hovered, the span moves into view, becoming fully visible and opaque.
  • Styles the h2 element within the accordion content with a specific font size, line height, and bottom border.
Transition Styles
.accordion li,
.accordion li img,
.accordion li .content,
.accordion li .content span {
  transition: 0.3s;
}
  • Applies a smooth transition of 0.3s to the list items, images, content divs, and spans, ensuring a smooth animation effect when their styles change.