Responsive Expanding Accordion Gallery With Pure CSS

Category: Accordion , CSS & CSS3 , Gallery | March 24, 2024
Author:jakob-e
Views Total:138 views
Official Page:Go to website
Last Update:March 24, 2024
License:MIT

Preview:

Responsive Expanding Accordion Gallery With Pure CSS

Description:

This is a CSS-only expanding accordion gallery that helps create a responsive, horizontal accordion layout that reveals full-size images with a simple hover.

It’s perfect for showcasing product photos, portfolios, or travel memories – anything where you want to reveal more detail upon user interaction. Plus, the responsive design ensures the accordion gallery looks perfect on all devices from desktops to mobiles.

How to use it:

1. Code the HTML for the accordion gallery.

<section class="container">
  <div class="category_container">
    <div class="content">
      <img src="alternative-1.jpg"  />
      <img src="1.jpg" class="profile_image" alt="Profile" />
      <div class="profile_detail">
        <span>Item 1</span>
        <p>Profile 1</p>
      </div>
      <div class="wrapper">           
        <div class="profile_quote">
          <p>Profile Quote 1</p>
        </div>
      </div>
    </div>
    <div class="content">
      <img src="alternative-2.jpg"  />
      <img src="2.jpg" class="profile_image" alt="Profile" />
      <div class="profile_detail">
        <span>Item 2</span>
        <p>Profile 2</p>
      </div>
      <div class="wrapper">           
        <div class="profile_quote">
          <p>Profile Quote 2</p>
        </div>
      </div>
    </div>
    More Items Here
  </div>
</section>

2. The necessary CSS rules.

:root {
  --light: #ffe6e6;
  --dark: #0c0c0c;
}
.container {
  --bg-color: radial-gradient(
  	circle at 50% 0%,
  	rgba(50, 50, 50, 1) 0%,
  	rgba(12, 12, 12, 1) 100%
  );
  overflow: clip;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 5rem;
  width: 100%;
  height: 100dvh;
  background-image: var(--bg-color);
}
.category_container {
  --gap: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: calc(var(--gap) * 2);
  width: 100%;
  height: 100%;
}
.content {
  --active: 0;
  cursor: pointer;
  overflow: clip;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 2.5rem;
  width: calc((100% / 3) - var(--gap));
  height: 100%;
  border-radius: 1rem;
  transition: width 0.5s ease-in-out;
}
.content:hover {
  --active: 1;
  width: calc(70% - var(--gap));
}
.content::before {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  opacity: 0.6;
}
.content img {
  position: absolute;
  z-index: -20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.content .profile_image {
  opacity: calc(1 - var(--active));
  transition: opacity 0.3s ease-in-out;
}
.profile_detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 12rem;
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}
.profile_detail span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--light);
  text-wrap: nowrap;
}
.profile_detail p {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--light);
}
.profile_quote {
  width: 22rem;
  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
}
.profile_quote p {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--light);
  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.1s;
}
.wrapper {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s, -ms-grid-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}
.profile_quote {
  min-height: 0;
  transform: translateY(50%);
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
}
.content:hover .wrapper {
  grid-template-rows: 1fr;
}
.content:hover .profile_quote {
  transform: none;
  opacity: 1;
}

You Might Be Interested In:


Leave a Reply