A CodePen by Sara Soueidan. CSS3 Testimonials Slider - Metro-style testimonials slider

index.html

<h1> CSS3 Testimonials Slider</h1>
<div class="container">
  <input type="radio" name="nav" id="first" checked/>
  <input type="radio" name="nav" id="second" />
  <input type="radio" name="nav" id="third" />
  
  <label for="first" class="first"></label>
<label for="second"  class="second"></label>
<label for="third" class="third"></label>
 
  <div class="one slide">
    <blockquote>
      <span class="leftq quotes">&ldquo;</span> He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again. <span class="rightq quotes">&bdquo; </span>
    </blockquote>
    <img src="http://media-cache-ec3.pinterest.com/upload/276830708316574707_vQX7jld6.jpg" width="170" height="130" />
    <h2>Steve Kruger</h2>
    <h6>UI/UX Designer at Woof Design Studio</h6>
  </div>
  
  <div class="two slide">
    <blockquote>
      <span class="leftq quotes">&ldquo;</span> He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I recommend him to anyone who wants their work done professionally. The project ... <a href="#"> read more</a><span class="rightq quotes">&bdquo; </span>
    </blockquote>
    <img src="http://behance.vo.llnwd.net/profiles14/297668/projects/3041537/f4d6311b432c4804f1c8045459df9647.jpg" width="170" height="130" />
    <h2>John Doe</h2>
    <h6>Developer Relations at Woof Studios</h6>
  </div>
  
  <div class="three slide">
    <blockquote>
      <span class="quotes leftq"> &ldquo;</span> He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again. <span class="rightq quotes">&bdquo; </span>
    </blockquote>
    <img src="http://media.digitalcameraworld.com/files/2012/10/People_photography_composition_tips_PHG18.chap4_.n_p38_39.jpg" width="170" height="130" />
    <h2>Steve Stevenson</h2>
    <h6>CEO Woof Web Design Studios</h6>
  </div>
  
  
</div>

script.js

/*

Inspired by Subash Dharel's work on Dribbble:
http://dribbble.com/shots/757402-FREEe-Metro-Testimonial
A free PSD is available.

*/

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

*{
  box-sizing:border-box;
}
html, body{
  height:100%;
  font: normal 1em/1.5 "Open Sans";
  background-color: #EADCBF;
  background-size:cover;
}
a{
  color:#ccc;
}
.container{
  width:500px;
  min-height:315px;
  margin:0 auto;
  background: url('http://assets7.pinimg.com/upload/276830708316574712_Yb2N03Ey.jpg');
  position:relative;
  padding-bottom:30px;
  overflow:hidden;
}
h1{
  text-align:center;
  text-shadow:0 1px white;
  color:#02303F;
}
h2{
  color:#736861; 
  margin:15px 0 5px;
  text-shadow:0 1px rgba(255,255,255,0.5);
}
h6{
  color:#928566; 
  margin:0;
}
input[type="radio"] {
position: absolute;
width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
label{
  display:block;
  width:32%;
  border: 4px solid white;
  position:absolute;
  bottom:5px;
  cursor: pointer;
  transition: border-color 0.3s linear;
}

label.second{
  left:34%;
}
label.third{
  left:68%;
}

blockquote{
  margin:0;
  padding:30px;
  width:500px;
  background-color: #DB532B;
  color:white;
  box-shadow: 0 5px 2px rgba(0,0,0,0.1);
  position:relative;
  transition: background-color 0.6s linear;
}

blockquote:after { 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  top: 100%; 
  border: solid transparent; 
  border-top-color: #DA532B;
  border-left-color:#DA532B;
  border-width: 10px; 
  left: 10%; 
} 
#second:checked ~ .two blockquote {
  background-color:purple;
}
.two blockquote:after{
  border: solid transparent; 
  border-top-color: purple;
  border-left-color:purple;
  border-width: 10px;
}
#third:checked ~ .three blockquote{
  background-color:#54885F;
}
.three blockquote:after{
  border: solid transparent; 
  border-top-color: #54885F;
  border-left-color: #54885F;
  border-width: 10px;
}
.quotes{
  position:absolute;
  color:rgba(255,255,255,0.5);
  font-size:5em;
}
.leftq{
  top:-25px;
  left:5px;
}
.rightq{
  bottom:-10px;
  right:5px;
}
img{
  float:left;
  margin-right: 20px;
}
.slide{
  position:absolute;
  left:-100%;
  opacity:0;
  transition: all 0.6s ease-in;
}

#first:checked ~ label.first {
  border-width:6px;
  border-color:#DB532B;
}
#second:checked ~ label.second {
  border-width:6px; border-color:purple;
}
#third:checked ~ label.third {
  border:6px solid #54885F;
}

#first:checked ~ div.one {
  left:0;
  opacity:1;
}
#second:checked ~ div.two {
  left:0;
  opacity:1;
}
#third:checked ~ div.three {
  left:0;
  opacity:1;
}