Pure CSS Horizontal Responsive Image Accordion Slider

Category: Accordion , CSS & CSS3 | April 30, 2015
Author: Michael Ferry
Views Total: 9,060
Official Page: Go to website
Last Update: April 30, 2015
License: MIT

Preview:

Pure CSS Horizontal Responsive Image Accordion Slider

Description:

A pure CSS/CSS3 based responsive accordion slider that allows you to horizontally expands the images on mouse hover. On small screens such as mobile devices, the accordion slider will be transformed into a vertical image list to fit its parent container.

How to use it:

The markup structure to create an accordion slider from an unordered list.

<div class="accordion">
  <ul>
    <li>
      <div> <a href="#">
        <h2>Title 1</h2>
        <p>Description 1</p>
        </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>Title 2</h2>
        <p>Description 2</p>
        </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>Title 3</h2>
        <p>Description 3</p>
        </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>Title 4</h2>
        <p>Description 4</p>
        </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>Title 5</h2>
        <p>Description 5</p>
        </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>Title 6</h2>
        <p>Description 6</p>
        </a> </div>
    </li>
  </ul>
</div>

The basic CSS styles for the accordion slider.

.accordion {
  width: 100%;
  max-width: 1080px;
  height: 250px;
  overflow: hidden;
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div a {
  display: block;
  height: 250px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 160px;
}

.accordion ul li div a p {
  top: 160px;
  font-size: 13.5px;
}

Add background images to the accordion slider.

.accordion ul li:nth-child(1) { background-image: url("1.jpg"); }

.accordion ul li:nth-child(2) { background-image: url("2.jpg"); }

.accordion ul li:nth-child(3) { background-image: url("3.jpg"); }

.accordion ul li:nth-child(4) { background-image: url("4.jpg"); }

.accordion ul li:nth-child(5) { background-image: url("5.jpg"); }

.accordion ul li:nth-child(6) { background-image: url("6.jpg"); }

Create the expand effects using CSS3 transforms.

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

Destroy the accordion slider and display as an image list when the screen size is smaller than 600px.

@media screen and (max-width: 600px) {

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}

}

You Might Be Interested In:


3 thoughts on “Pure CSS Horizontal Responsive Image Accordion Slider

  1. AngelikaD

    Hi there, this is an interesting piece of code but as there is no documentation, I wonder if the width attribute in the .accordion ul li declaration is calculated based on a formula containing the original dimensions of the image and the number of images in the slider. Please tell us more if possible?

    Reply
  2. biellebrunner

    In the demo, the images are centered, even before the slide “stretches”. But in this code, they’re not. How to get them to center?

    Reply
  3. StarFox_Mulder

    Code worked great for me — curious if you know how to add on an in-body “pop-up” which would display the full image if the image with focus were clicked. Thanks for posting this!!

    Reply

Leave a Reply