JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="translate">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
}

.top {
  position: relative;
  float: left;
  width: 50%;
  height: 50%;
  -webkit-transition: top 0.2s;
  -moz-transition: top 0.2s;
  transition: top 0.2s;
}

.top:hover, .top.active {
  top: -100px;
}

.translate {
  position: relative;
  float: left;
  width: 50%;
  height: 50%;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}

.translate:hover, .translate.active {
  position: relative;
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  transform: translateY(-100px);
}

div > div {
  float: left;
  width: 33.333%;
  height: 33.333%;
  background: url(http://i.imagebanana.com/img/mxvosih4/1.jpg) no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

div > div:nth-child(even) {
  background: url(http://i.imagebanana.com/img/gwk7iaij/2.jpg) no-repeat center;
}

JavaScript

$('.translate, .top').on('click', function() {
  $(this).toggleClass('active');
});