<section class="parent">
  <div class="square grow">grow</div>
  <div class="square shrink">shrink</div>
</section>

<section class="parent">
  <div class="square transition grow">grow with transition</div>
  <div class="square transition shrink">shrink with transition</div>
</section>

// Pen styles
.grow:hover {
  // Growing in size
  transform: scale(1.2);
}
.shrink:hover {
  // shrinking in size
  transform: scale(0.8);
}
.transition {
  transition: all 0.3s ease-in-out;
}

// Aesthetic styles
.square {
  background: #546e7a;
  display: inline-flex;
  width: 165px;
  padding: 1.5rem;
  margin: 1.5rem;
  font: {
    size: 1.2rem;
  }
  cursor: pointer;
}

// Reset
body {
  margin: 0;
  color: #fff;
  background: #ff5252;
}