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

<section class="parent">
  <div class="square transition grow">grow with transition</div>
  <div class="square transition shrink">shrink with transition</div>
// 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;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.