Responsive CSS Accordion Card Slider: No JavaScript

Preview:

Description:

This is a responsive, animated, accordion-style card slider built using only HTML and CSS. Clicking an item within the slider expands it horizontally to full size, showcasing the image with its title and caption. Meanwhile, any previously opened item shrinks back to its original size.

This slider is great for portfolio showcases, product galleries, and photo collections. The accordion-style layout presents multiple images in a space-efficient format while giving users full-size views of selected images. The expanding animation draws attention to the active content and creates visual interest.

How to use it:

1. Code the HTML structure for your slider. Use the following HTML as a template, and adjust the content to fit your needs. Each image or card within the slider is represented by a combination of an <input> element (acting as a radio button) and a <label> element.

<div class="mySlider">
  <!-- Item 1 -->
  <input class="radio" type="radio" name="card" id="card-one" checked />
  <label class="content" for="card-one">
    <h1 class="title-card">
       <span class="marg-bott">Image 1</span>
      <span class="subtitle">Description 1</span>
    </h1>
    <h3 class="card-title subsubtitle">
      <span>Title 1</span>
    </h3>
  </label>
  <!-- Item 2 -->
  <input class="radio" type="radio" name="card" id="card-two" checked />
  <label class="content" for="card-two">
    <h1 class="title-card">
       <span class="marg-bott">Image 2</span>
      <span class="subtitle">Description 2</span>
    </h1>
    <h3 class="card-title subsubtitle">
      <span>Title 2</span>
    </h3>
  </label>
  <!-- Item 3 -->
  <input class="radio" type="radio" name="card" id="card-three" checked />
  <label class="content" for="card-three">
    <h1 class="title-card">
       <span class="marg-bott">Image 3</span>
      <span class="subtitle">Description 3</span>
    </h1>
    <h3 class="card-title subsubtitle">
      <span>Title 3</span>
    </h3>
  </label>
  ... more items here ...
</div>

2. Add the following CSS to style your slider. Don’t forget to replace the placeholder image URLs with your own:

.mySlider {
  display: flex;
  height: 21rem;
  margin: 0 auto;
  max-width: 55vw;
  width: 55vw;
}
.radio {
  display: none;
}
.content {
  background: transparent;
  background-image: url("1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3rem;
  cursor: pointer;
  flex: 1;
  margin-right: 0.8rem;
  overflow: hidden;
  position: relative;
  transition: all 0.5s cubic-bezier(0.05, 0.60, 0.39, 0.94);
}
.content::before {
  background: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.content > * {
  position: relative;
  z-index: 1;
}
.content:hover {
  box-shadow: 0.7rem 0.7rem 0.5rem rgba(0, 0, 0, 0.3);
}
.content:nth-of-type(2) {
  background: transparent;
  background-image: url("2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.content:nth-of-type(3) {
  background: transparent;
  background-image: url("3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.card-title {
  bottom: 1.2rem;
  color: black;
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  left: 1.5rem;
  line-height: 1.1;
  opacity: 0;
  position: absolute;
  transform: translateX(2rem);
  transition: 290ms cubic-bezier(0.05, 0.62, 0.40, 0.95) 300ms;
  transition-property: opacity, transform;
  user-select: none;
  white-space: nowrap;
}
.title-card{
  top: 2rem;
  color: black;
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  left: 1.5rem;
  line-height: 1.1;
  opacity: 0;
  position: absolute;
  transform: translateX(2rem);
  transition: 290ms cubic-bezier(0.05, 0.60, 0.42, 0.94) 300ms;
  transition-property: opacity, transform;
  user-select: none;
  white-space: nowrap;
}
.subtitle {
  font-size: 1rem;
}
.subsubtitle{
  font-size: 0.85rem;
}
.paddT{
  padding-left: 3rem;
  padding-right: 3rem;
}
.radio:checked + .content {
  border-radius: 2rem;
  box-shadow: 0.3rem 0.3rem 0.4rem rgba(0, 0, 0, 0.3);
  flex: 9;
}
.radio:checked + .content > .card-title {
  opacity: 1;
  transform: translateX(0);
}
.radio:checked + .content > .title-card{
  opacity: 1;
  transform: translateX(0);
}
.marg-bott{
  margin-bottom: 1.5rem;
}

How it works:

The CSS begins by setting up a flex container for the .mySlider, arranging the cards horizontally. The .radio inputs are hidden. The .content class styles the individual cards: setting the background image, size, border-radius, and initial flex value.

The transition property creates the smooth animation when a card expands or shrinks. The hover effect adds a subtle shadow. The nth-of-type selectors allow you to apply different background images to each card. The .card-title and .title-card classes style the text content within the cards, initially hiding them and positioning them off-screen.

The crucial part is the .radio:checked + .content selector. When a radio button is checked (by clicking its associated label), the adjacent .content element receives updated styles. Its flex value increases, causing it to expand, and the text content becomes visible with a smooth transition.

The functionality hinges on the relationship between the radio inputs and their corresponding labels. When you click a label, it triggers the associated radio input to be checked.

The CSS then uses the :checked pseudo-class to identify which radio button is active. The adjacent sibling selector (+) targets the corresponding .content element. By applying flex: 9 to the checked card, it expands to take up more space within the flex container. The transition property ensures this expansion happens smoothly.

Simultaneously, the other cards, whose radio buttons are not checked, retain their initial flex: 1 value, causing them to shrink. The text elements within the expanded card become visible due to the change in opacity and transform properties, also animated by transition.