A CodePen by Al Steffen. Disappearing kittens

index.html

<div class="head-pops">
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
  <div class="head">
    <img class="avatar" src="http://placekitten.com/100/100" />
    <div class="name">
      John Smith
    </div>
  </div>
</div>

<input class="trigger" type="submit" value="Toggle some heads" />

script.js

$(document).ready(function () {
  $('input.trigger').click(function () {
    $('.head:nth-child(5n+2)').toggleClass('hidden-head');
    return false;
  });
});

style.scss

@import "compass";
@import 'compass';
@import 'compass/css3';

.head-pops {
  width: 80%;
  margin: 2em auto;
  text-align: center;
}

.head {
  position: relative;
  z-index: 1;
  display: inline-block;
  @include box-sizing(border-box);
  width: (100% / 5);
  margin: 1em -.2em;
  padding: 0 .5em;
  opacity: 1;
  @include transition-property(visibility, opacity, transform, width);
  @include transition-duration(1s);
}

.hidden-head {
  z-index: 2;
  opacity: 0;
  width: 0;
  @include simple-transform(0, 35deg, 5em, 10em);
}

.avatar {
  max-width: 100%;
}

input[type="submit"] {
  display: block;
  margin: 1em auto 0;
  clear: both;
}