<section class="testimonials__section">
  <div class="testimonials__block">
    <p class="testimonials__message">
      <span class="testimonials__message--dotter">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam 
      </span>
      <span class="testimonials__message--hider">
         laboriosam et id dolore dolor, quisquam excepturi nostrum iusto dolorem, quae distinctio, nulla aut libero. Animi, temporibus saepe voluptatibus ratione dolorem.
      </span>
    </p>
    <img class="testimonials__picture" src="http://exercisebliss.com/wp-content/themes/bliss-blank3/img/profile-square.jpg" alt="profile picture" />
    <p class="testimonials__name">Melisa L. Hack</p>
    <p class="testimonials__position">Family child care provider</p>
  </div>
  <div class="testimonials__block">
    <p class="testimonials__message">
      <span class="testimonials__message--dotter">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam 
      </span>
      <span class="testimonials__message--hider">
         laboriosam et id dolore dolor, quisquam excepturi nostrum iusto dolorem, quae distinctio, nulla aut libero. Animi, temporibus saepe voluptatibus ratione dolorem.
      </span>
    </p>
    <img class="testimonials__picture" src="http://static1.squarespace.com/static/5102d016e4b0a0147cc59362/t/51f91ae3e4b0a2a178e430d2/1434046213777/Profile+Pic+Square.jpg" alt="profile picture" />
    <p class="testimonials__name">Viola C. Phillips</p>
    <p class="testimonials__position">
Medical secretary</p>
  </div>
  <div class="testimonials__block">
    <p class="testimonials__message">
      <span class="testimonials__message--dotter">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam 
      </span>
      <span class="testimonials__message--hider">
         laboriosam et id dolore dolor, quisquam excepturi nostrum iusto dolorem, quae distinctio, nulla aut libero. Animi, temporibus saepe voluptatibus ratione dolorem.
      </span>
    </p>
    <img class="testimonials__picture" src="https://media.creativemornings.com/uploads/user/avatar/222365/Square_Profile_250px.png" alt="profile picture" />
    <p class="testimonials__name">Arthur L. Perry</p>
    <p class="testimonials__position">Industrial Production Manager</p>
  </div>
</section>
@import url(https://fonts.googleapis.com/css?family=Cabin:400,700);
@import "breakpoint";
@import "bourbon";
$c1: #43cea2;
$c2: #185a9d;
$text: #515E6D;
$white: #fff;
$grey: #f0f4f7;
$grey-light: #EFF2F4;
$md: 48em;
$font-size-lg: 1.2rem;
$line-height-lg: (4/3);
$line-height-xl: 2rem;
body {
  font-family: 'Cabin', sans-serif;
  font-size: 16px;
}

.testimonials__section {
  @include linear-gradient($c1, $c2);
  @include display(flex);
  @include flex-direction(column);
  @include justify-content(flex-start);
  @include align-items(center);
  @include breakpoint($md) {
    @include flex-direction(row);
    @include justify-content(center);
    height: 700px;
  }
}

.testimonials__block {
  cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 150%);
  margin-bottom: 3rem;
  margin-top: 3rem;
  @include transition-duration(.7s);
  @include breakpoint($md) {
    max-width: 740px;
    min-width: 390px;
    @include transform(scale(0.7));
  }
}

.testimonials__message {
  display: block;
  padding: 1rem 1.5rem 1rem 1.5rem;
  position: relative;
  border-radius: .2rem;
  color: $white;
  font-size: $font-size-lg;
  line-height: $line-height-xl;
  overflow: hidden;
  text-align: center;
  @include breakpoint($md) {
    padding: 3rem 3rem 2rem 5rem;
    text-align: left;
    &:before {
      display: block;
      position: absolute;
      content: "\201C";
      font-size: 90px;
      line-height: 1;
      color: $c1;
      top: 2rem;
      left: 1.4rem;
    }
  }
}

.testimonials__message--dotter {
  &:after {
    content: "...";
  }
}

.testimonials__message--hider {
  display: none;
}

.testimonials__picture {
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 2px solid $grey;
  border-radius: 100%;
}

.testimonials__name {
  margin: 0 auto;
  padding-top: 1rem;
  color: $white;
  font-size: $font-size-lg;
  line-height: $line-height-lg;
  margin-bottom: 0;
  text-align: center;
  // display: none;
}

.testimonials__position {
  margin: 5px auto;
  color: $grey;
  margin-bottom: 0;
  text-align: center;
  // display: none;
}

.testimonials__block--active {
  mask: none;
  -webkit-mask-image: none;
  flex: 1;
  transform: scale(1);
  @include transition-duration(.7s);
  @include breakpoint($md) {
    margin: 2rem;
  }
  .testimonials__message {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    cursor: auto;
    border: 2px solid $grey;
    color: $text;
    height: auto;
    overflow: visible;
    -webkit-animation: testimoinals__fade 0.7s;
    animation: testimoinals__fade 0.7s;
    @include linear-gradient($grey-light, $white, 0%, 100%);
    &:after {
      content: '';
      display: block;
      margin: 0 auto;
      width: 20px;
      height: 20px;
      background-color: $grey-light;
      bottom: -12px;
      margin-bottom: -28px;
      transform: rotate(45deg);
      border-right: 2px solid $grey;
      border-bottom: 2px solid $grey;
    }
    @include breakpoint($md) {
      padding-bottom: 3rem;
      margin-left: 0;
      margin-right: 0;
      &:after {
        bottom: -31px;
        position: relative;
        left: -1rem;
      }
    }
  }
  .testimonials__message--dotter {
    &:after {
      content: "";
    }
  }
  .testimonials__message--hider {
    display: inline;
  }
  .testimonials__name {
    display: block;
  }
  .testimonials__position {
    display: block;
  }
}

@keyframes testimoinals__fade {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
View Compiled
// Grab all blocks
testimonials = document.getElementsByClassName('testimonials__block');

// Dynamically add class "active" to central testimonial on desktop
var mq = window.matchMedia("(min-width: 48em)");
if (mq.matches) {
  testimonials[1].classList.add('testimonials__block--active');
} else {
  for (i = 0; i < testimonials.length; i++) {
    testimonials[i].classList.add('testimonials__block--active');
  };
}

var toogleBlock = function() {
  var active = document.getElementsByClassName('testimonials__block--active');
  active[0].classList.remove('testimonials__block--active');
  this.classList.add('testimonials__block--active');
}

// Bind event listeners
for (var i = 0; i < testimonials.length; i++) {
  testimonials[i].addEventListener('click', toogleBlock, false);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.