Fancy Accordion Slider With Pure CSS

Preview:

Description:

A pure CSS/CSS3 accordion slider that you are able to expand the desired slide into full size on mouse hover or touch tap. Responsive layout based on CSS3 flexbox model. Currently comes with 5 fancy transition effects.

How to use it:

Code the accordion slider.

<div class="flexbox-slider my-flexbox-slider">
  <div class="flexbox-slide">
    <img src="1.jpg" alt="Slide Image">
    <div class="text-block">
      <h3>Slide #1 is here</h3>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
      </div>
    </div>
  </div>
  <div class="flexbox-slide">
    <img src="2.jpg" alt="Slide Image">
    <div class="text-block">
      <h3>Slide #2 is here</h3>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
      </div>
    </div>
  </div>
  <div class="flexbox-slide">
    <img src="3.jpg" alt="Slide Image">
    <div class="text-block">
      <h3>Slide #3 is here</h3>
      <div class="text">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
      </div>
    </div>
  </div>
  ...
</div>

The primary CSS/CSS3 rules for the accordion slider.

.flexbox-slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 500px;
  visibility: hidden;
}
.flexbox-slider .flexbox-slide {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  width: 20%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  visibility: visible;
}
.flexbox-slider .flexbox-slide:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 2;
  opacity: 0;
}
.flexbox-slider .flexbox-slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
.flexbox-slider .flexbox-slide .text-block {
  position: absolute;
  left: 30px;
  bottom: 30px;
  max-width: 400px;
  padding: 20px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 4;
  visibility: hidden;
}
.flexbox-slider .flexbox-slide .text-block h3 {
  font-size: 20px;
  font-weight: 700;
}
.flexbox-slider:hover .flexbox-slide:hover {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 80%;
}

Apply your own CSS transition effect to the accordion slider.

.flexbox-slider.flexbox-slider-demo .flexbox-slide .text-block { bottom: 60px; }
.flexbox-slider.flexbox-slider-demo:hover .flexbox-slide:hover .text-block {
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}