<div class="author-quote-wrap">
  <input class="toggle-quote" type="radio" id="AQ-1" name="quote" checked>
  <div class="author-quote">
    <div class="pull-left author-photo photo-a animated bounceInLeft">
      <div class="navigate">
        <label class="label left" for="AQ-5">&nbsp;</label>
        <label class="label right" for="AQ-2">&nbsp;</label>
      </div>
    </div>
    <div class="pull-right quote-content">
      <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 423</div></div>
      <div class="quote-text animated rotateInDownRight">Don't You<br>Think That<br>If I Were<br>Wrong,<br>I'd Know It?</div>
      <div class="quote-author animated lightSpeedIn">Sheldon Cooper</div>
    </div>
  </div>

  <input class="toggle-quote" type="radio" id="AQ-2" name="quote">
  <div class="author-quote">
    <div class="pull-left author-photo photo-b animated bounceInLeft">
      <div class="navigate">
        <label class="label left" for="AQ-1">&nbsp;</label>
        <label class="label right" for="AQ-3">&nbsp;</label>
      </div>
    </div>
    <div class="pull-right quote-content">
      <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 512</div></div>
      <div class="quote-text animated zoomInDown">My Goal Was<br>To Prove<br>To My Family<br>I wasn't a dummy</div>
      <div class="quote-author animated lightSpeedIn">Ronalda Colen</div>
    </div>
  </div>

  <input class="toggle-quote" type="radio" id="AQ-3" name="quote">
  <div class="author-quote">
    <div class="pull-left author-photo photo-c animated bounceInLeft">
      <div class="navigate">
        <label class="label left" for="AQ-2">&nbsp;</label>
        <label class="label right" for="AQ-4">&nbsp;</label>
      </div>
    </div>
    <div class="pull-right quote-content">
      <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 618</div></div>
      <div class="quote-text animated bounceInRight">Smart-Phones.<br>Who Cares?<br>Smart-Phones.<br>I Only Have<br>Dummy Phones</div>
      <div class="quote-author animated lightSpeedIn">Don Rickles</div>
    </div>
  </div>

  <input class="toggle-quote" type="radio" id="AQ-4" name="quote">
  <div class="author-quote">
    <div class="pull-left author-photo photo-d animated bounceInLeft">
      <div class="navigate">
        <label class="label left" for="AQ-3">&nbsp;</label>
        <label class="label right" for="AQ-5">&nbsp;</label>
      </div>
    </div>
    <div class="pull-right quote-content">
      <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 741</div></div>
      <div class="quote-text animated lightSpeedIn">Design<br>Means<br>Being Good<br>Not Just<br>Looking Good</div>
      <div class="quote-author animated lightSpeedIn">Jacquie Dermody</div>
    </div>
  </div>

  <input class="toggle-quote" type="radio" id="AQ-5" name="quote">
  <div class="author-quote">
    <div class="pull-left author-photo photo-e animated bounceInLeft">
      <div class="navigate">
        <label class="label left" for="AQ-4">&nbsp;</label>
        <label class="label right" for="AQ-1">&nbsp;</label>
      </div>
    </div>
    <div class="pull-right quote-content">
      <div class="clearfix animated zoomIn"><div class="quote-like pull-right"><span class="love"></span> 824</div></div>
      <div class="quote-text animated flipInX">Design<br>Is<br>Thinking<br>Made<br>Visible</div>
      <div class="quote-author animated lightSpeedIn">Mohan Khadka</div>
    </div>
  </div>
</div>
body{
  margin:0;
  color:#444;
  background:#e2e7eb;
  font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.author-quote-wrap .author-quote,
.author-quote-wrap .author-photo:before{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
}

.author-quote-wrap{
  color:#fff;
  width:100%;
  overflow:hidden;
  max-width:560px;
  min-height:390px;
  margin:50px auto 0;
  background:#17a0ff;
  position:relative;
  box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
}
.author-quote-wrap .author-quote{
  display:none;
}
.author-quote-wrap .toggle-quote{
  display:none;
}
.author-quote-wrap .toggle-quote:checked + .author-quote{
  display:block;
}
.author-quote-wrap .author-quote a{
  color:inherit;
  text-decoration:none;
}
.author-quote-wrap .author-photo,
.author-quote-wrap .quote-content{
  height:100%;
  position:relative;
}
.author-quote-wrap .author-photo{
  width:140px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  quotes:'\201C''\201D''\2018''\2019';
}
.author-quote-wrap .author-photo.photo-a{
  background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-1.jpg);
}
.author-quote-wrap .author-photo.photo-b{
  background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-2.jpg);
}
.author-quote-wrap .author-photo.photo-c{
  background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-3.jpg);
}
.author-quote-wrap .author-photo.photo-d{
  background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-4.jpg);
}
.author-quote-wrap .author-photo.photo-e{
  background-image:url(https://raw.githubusercontent.com/khadkamhn/day-007-author-quote/master/img/author-5.jpg);
}
.author-quote-wrap .author-photo:before{
  content:'';
  background:rgba(22,160,255,.5);
}
.author-quote-wrap .author-photo:after{
  top:15px;
  left:60px;
  font-size:72px;
  line-height:72px;
  position:absolute;
  font-family:serif;
  content:open-quote;
}
.author-quote-wrap .author-photo .navigate{
  left:15px;
  z-index:10;
  right:15px;
  bottom:15px;
  position:absolute;
  text-align:center;
}
.author-quote-wrap .author-photo .navigate .label{
  width:15px;
  height:30px;
  cursor:pointer;
  position:relative;
  display:inline-block;
}
.author-quote-wrap .author-photo .navigate .label.left{
  left:-30px;
}
.author-quote-wrap .author-photo .navigate .label.right{
  right:-30px;
}
.author-quote-wrap .author-photo .navigate .label.disabled{
  cursor:not-allowed;
}
.author-quote-wrap .author-photo .navigate .label:before,
.author-quote-wrap .author-photo .navigate .label:after{
  content:'';
  height:2px;
  width:15px;
  background:#ccc;
  position:absolute;
}
.author-quote-wrap .author-photo .navigate .label:before{
  top:62%;
}
.author-quote-wrap .author-photo .navigate .label:after{
  bottom:62%;
}
.author-quote-wrap .author-photo .navigate .label.left:before,
.author-quote-wrap .author-photo .navigate .label.right:after{
  transform:rotate(45deg);
}
.author-quote-wrap .author-photo .navigate .label.right:before,
.author-quote-wrap .author-photo .navigate .label.left:after{
  transform:rotate(-45deg);
}
.author-quote-wrap .author-photo .navigate .label.left:before,
.author-quote-wrap .author-photo .navigate .label.left:after{
  left:0;
}
.author-quote-wrap .author-photo .navigate .label.right:before,
.author-quote-wrap .author-photo .navigate .label.right:after{
  right:0;
}
.author-quote-wrap .author-photo .navigate .label.disabled:before,
.author-quote-wrap .author-photo .navigate .label.disabled:after,
.author-quote-wrap .author-photo .navigate .label.disabled:hover:before,
.author-quote-wrap .author-photo .navigate .label.disabled:hover:after{
  background:#bbb;
}
.author-quote-wrap .author-photo .navigate .label:hover:before,
.author-quote-wrap .author-photo .navigate .label:hover:after{
  background:#fff;
}

.author-quote-wrap .quote-content{
  padding:15px;
  width:calc(560px - 140px);
}
.quote-content .quote-like{
  font-size:12px;
  font-weight:400;
  padding:4px 8px;
  border-radius:15px;
  display:inline-block;
  background:rgba(0,0,0,.2);
}
.quote-content .quote-like .love{
    width:18px;
    height:10px;
    position:relative;
  display:inline-block;
}
.quote-content .quote-like .love:before,
.quote-content .quote-like .love:after {
    top:0;
    left:7px;
    content:'';
    width:7px;
    height:12px;
    background:#fff;
    position:absolute;
  transform:rotate(-45deg);
  transform-origin:0 100%;
    border-radius:20px 20px 0 0;
}
.quote-content .quote-like .love:after {
    left:0;
  transform:rotate(45deg);
  transform-origin :100% 100%;
}

.quote-content .quote-text,
.quote-content .quote-author{
  text-transform:uppercase;
}
.quote-content .quote-text{
  font-size:48px;
  font-weight:900;
  line-height:55px;
}
.quote-content .quote-author{
  bottom:15px;
  font-size:14px;
  font-weight:500;
  position:absolute;
}
.quote-content .quote-author:before{
  content:'- ';
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.