CSS3 Accordion Slider With Transitions And Flexbox

 

CSS3 Accordion Slider With Transitions And Flexbox

CSS3 accordion slider with Transitions and Flexbox

Author: foxeisen (fox_hover)

Links: Source Code / Demo

Created on: November 18, 2017

Made with: HTML, SCSS

Tags: accordion, slider, accordion slider, flexbox, css3

html

<div class="container">

  <h1>CSS3 accordion <span>slider</span> with Transitions and Flexbox</h1>

  <div class="subheader">(5 different effects)</div>

  <div class="link">

    <a href="https://github.com/eisenfox/css-flex-slider" target="_blanc"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Check on Github</a>

    <a href="http://100dayscode.co.uk/" title="Check Codepen Challenge" target="_blanc"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> Check Codepen Challenge</a>

  </div>

  

  <div class="slider-containers">

    

    <!--effect #1 -->

    <div class="slider-container">

      <h2>Effect #1</h2>

      <div class="flexbox-slider flexbox-slider-1">

        <div class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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 class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #4 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #5 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>

    </div>

    

    <!--effect #2 -->

    <div class="slider-container">

      <h2>Effect #2</h2>

      <div class="flexbox-slider flexbox-slider-2">

        <div class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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 class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #4 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #5 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>

    </div>

    

    <!--effect #3 -->

    <div class="slider-container">

      <h2>Effect #3</h2>

      <div class="flexbox-slider flexbox-slider-3">

        <div class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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 class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #4 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #5 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>

    </div>

    

    <!--effect #4 -->

    <div class="slider-container">

      <h2>Effect #4</h2>

      <div class="flexbox-slider flexbox-slider-4">

        <div class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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 class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #4 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #5 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>

    </div>

    

    <!--effect #5 -->

    <div class="slider-container">

      <h2>Effect #5</h2>

      <div class="flexbox-slider flexbox-slider-5">

        <div class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-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 class="flexbox-slide">

          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-4.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #4 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/694606/eff-9.jpg" alt="Slide Image">

          <div class="text-block">

            <h3>Slide #5 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>

    </div>

    

  </div>

</div>

css

//variables

$slider-height: 500px;

$text-block-width: 400px;

$dark-font-color: #212121;

$accent-font-color: #CA9CE1;

$light-font-color: #fff;

$text-overlay-color: #000;

$text-overlay-opacity: 0.6;

$slide-overlay-color: #fff;

$slide-overlay-opacity: 0.6;

//transitions and mixins

//transitions mixin

@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {

  transition-property: $property;

  transition-duration: $duration;

  transition-timing-function: $timing;

  transition-delay: $delay;

}

//position absolute mixin

@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {

  position: absolute;

  top: $top;

  left: $left;

  right: $right;

  bottom: $bottom;

}

/*common styles !!!YOU DON'T NEED THEM */

body {

  font: {

      family: 'Poppins', sans-serif;

      weight: 400;

      size: 17px;

    }

  color: $dark-font-color;

  line-height: 1.4;

}

.container {

  width: 1100px;

  margin: 50px auto 0;

  

  h1 {

    font: {

      size: 25px;

    }

    text-align: center;

    

    span {

      position: relative;

      font: {

        family: 'Merienda', cursive;

      }

      color: $accent-font-color;

      

      &:after {

        @include position-absolute($bottom: -10px, $left: 0);

        content: "~";

        

        width: 100%;

        text-align:  center;

      }

    }

  }

  

  .subheader {

    text-align: center;

    margin-top: 15px;

  }

}

  .link {

    display: flex;

    justify-content: center;

    width: 800px;

    margin: 30px auto 0;

    

    a {

      @include transition-mix;

      

      display: flex;

      align-items: center;

      flex-shrink: 0;

      margin-right: 40px;

      color: inherit;

      font: {

        size: inherit;

      }

      text-decoration: none;

      

      &:hover {

        color: $accent-font-color;

      }

      

      &:last-child {

        margin-right: 0;

      }

      i {

        color: $accent-font-color;

        margin-right: 9px;

        font-size: 30px;

      }

    }

  }

.slider-containers {

  width: 100%;

  margin-top: 60px;

}

.slider-container {

  margin-bottom: 60px;

  

  h2 {

    text-align: center;

  }

}

.flexbox-slider {

  margin-top: 50px;

}

/*slide styles !!!YOU NEED THEM */

.flexbox-slider {

  display: flex;

  width: 100%;

  height: $slider-height;

  visibility: hidden;

  

  .flexbox-slide {

    @include transition-mix($duration: .3s);

    

    width: 20%;

    height: 100%;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    visibility: visible;

    

    //overlay

    &:after {

      @include position-absolute($top: 0, $left: 0);

      content: "";

      display: block;

      width: 100%;

      height: 100%;

      background-color: rgba($slide-overlay-color, $slide-overlay-opacity);

      z-index: 2;

      

      opacity: 0;

    }

    

    img {

      @include position-absolute($top: 50%, $left: 50%);

      height: auto;

      width: auto;

      min-width: 100%;

      min-height: 100%;

      transform: translate(-50%, -50%);

      z-index: 1;

    }

    

    .text-block {

      @include position-absolute($bottom: 30px, $left: 30px);

      max-width: $text-block-width;

      padding: 20px;

      border-radius: 5px;

      background-color: rgba($text-overlay-color, $text-overlay-opacity);

      color: $light-font-color;

      

      z-index: 4;

      

      visibility: hidden;

      opacity: 0;

      

      h3 {

        font: {

          size: 20px;

          weight: 700;

        }

      }

    }

  }

  

    &:hover {

    

    .flexbox-slide:hover {

      flex-shrink: 0;

      width: 80%;

    }

  }

}

/* effect 1 styles */

.flexbox-slider.flexbox-slider-1 {

  

  .flexbox-slide {

    

    .text-block {

      bottom: 60px;

    }

  }

  

  &:hover {

    

    .flexbox-slide:hover {

      

      .text-block {

        @include transition-mix($delay: .5s);

        bottom: 30px;

        opacity: 1;

        visibility: visible;

      }

    }

  }

}

/* effect 2 styles */

.flexbox-slider.flexbox-slider-2 {

  

  .flexbox-slide {

    

    .text-block {

        left: -60px;

      }

  }

  

  &:hover {

    

    .flexbox-slide:not(:hover) {

      

      

      &:after {

        @include transition-mix;

        opacity: 1;

      }

    }

    

    .flexbox-slide:hover {

      

      .text-block {

        @include transition-mix($delay: .5s, $timing: cubic-bezier(0, 0, 0, 1.82), $duration: .3s);

        left: 30px;

        opacity: 1;

        visibility: visible;

      }

    }

  }

}

/* effect 3 styles */

.flexbox-slider.flexbox-slider-3 {

  

  .flexbox-slide {

    

    &:after {

      transform: scale(.5);

      transform-origin: center center;

    }

    

    .text-block {

      transform: rotate(-20deg);

    }

  }

  

  &:hover {

    

    .flexbox-slide:hover {

      

      &:after {

        @include transition-mix($delay: .4s);

        transform: scale(1);

        opacity: 1;

        visibility: visible;

      }

      

      .text-block {

        @include transition-mix($delay: .6s);

        transform: rotate(0deg);

        opacity: 1;

        visibility: visible;

      }

    }

  }

}

/* effect 4 styles */

.flexbox-slider.flexbox-slider-4 {

  

  .flexbox-slide {

    

    &:after {

      top: -100%;

    }

    

    .text-block {

      transform: scale(1.2);

    }

  }

  

  &:hover {

    

    .flexbox-slide:not(:hover) {

      

      &:after {

        @include transition-mix;

        top: 0;

        opacity: 1;

        visibility: visible;

      }

    }

    

    .flexbox-slide:hover {

      

      .text-block {

        @include transition-mix($delay: .5s);

        transform: scale(1);

        opacity: 1;

        visibility: visible;

      }

    }

  }

}

/* effect 5 styles */

.flexbox-slider.flexbox-slider-5 {

  

  .flexbox-slide {

    

    .text-block {

      transform: scale(.85);

    }

  }

  

  &:hover {

    

    .flexbox-slide:hover {

      

      .text-block {

        @include transition-mix($delay: .7s);

        transform: scale(1);

        opacity: 1;

        visibility: visible;

      }

      

      &:after {

        @include transition-mix($delay: .4s);

        opacity: 1;

        visibility: visible;

      }

    }

  }

}