A CodePen by Azik Samarkandiy. Accordion slider - using only CSS

index.html

<div class="slider">
  <div class="slides">
    <p class="title"><q>Come forth into the light of things, let nature be your teacher.</q>
      <span class="author">William Wordsworth </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>Look deep into nature, and then you will understand everything better.</q>
      <span class="author">Albert Einstein </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>A bird doesn't sing because it has an answer, it sings because it has a song.</q>
      <span class="author">Lou Holtz </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>The butterfly counts not months but moments, and has time enough. </q>
      <span class="author">Rabindranath Tagore </span>
    </p>  
  </div>
  <div class="slides">
    <p class="title"><q>There are always flowers for those who want to see them.</q>
      <span class="author">Henri Matisse </span>
    </p>
  </div>
  <div class="slides">
    <p class="title"><q>Green is the prime color of the world, and that from which its loveliness arises.</q>
      <span class="author">Pedro Calderon</span>
    </p>
  </div>
</div>
  <a class="github" href="https://github.com/html5web" target="_blank"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

script.js

/* Quotes taken from BrainyQuote http://www.brainyquote.com/quotes/topics/topic_nature.html*/

style.css

body{
  background: #ccc;
  width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.slider{
  background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg);
  position: relative;
  width: 900px;
  height: 300px;
  cursor: pointer;
  overflow: hidden;
  border: solid 7px #111; 
}

.slides{
  width: 800px;
  height: 300px;
  float: left;
  position: absolute;
  transition: margin .3s linear;
}

.slides:nth-child(1){
  background: #222 url(http://lorempixel.com/output/nature-q-c-900-300-10.jpg);
  
}

.slides:nth-child(2){
  background: #333 url(http://lorempixel.com/output/nature-q-c-900-300-5.jpg);
  margin-left: 150px;
}

.slides:nth-child(3){
  background: #444 url(http://lorempixel.com/output/nature-q-c-900-300-7.jpg);
  margin-left: 300px;
}

.slides:nth-child(4){
  background: #555 url(http://lorempixel.com/output/nature-q-c-900-300-6.jpg);
  margin-left: 450px;
}

.slides:nth-child(5){
  background: #666 url(http://lorempixel.com/output/nature-q-c-900-300-2.jpg);
  margin-left: 600px;
}

.slides:nth-child(6){
  background: #777 url(http://lorempixel.com/output/nature-q-c-900-300-1.jpg);
  margin-left: 750px;
}

.slides:hover{
  margin: 0 50px 0 50px;
  position: absolute;
  z-index: 9999;
  transition: .1s linear;
}

.slides:hover .title{
  transform: translateY(-140px);
  transition: .5s linear;
}

.title{
  background: rgba(255, 255, 255, .7);
  margin: 30px;
  padding: 20px;
  border-radius: 5px;
  position: absolute;
  bottom: -150px;
}

q{
  font-size: 16px;
  font-style: italic;
}

.author{
  margin-top: 30px;
}

::selection{
  background: #222;
  color: #fff;
}

.github img{
  position: absolute; 
  top: 0; 
  right: 0; 
  border: 0;
}