<p>Hover over box below to see effect</p>
<div class="transition-box">
  Transition <br/> Box
</div>
.transition-box {
/* Regular Styles */
  height: 120px;
  width: 120px;
  display: grid;
  place-items: center;
  background: #A35700;
  color: white;
  padding: 0;
  
/* Transition Styles */
  transition: 1s ease-in-out;
}

.transition-box:hover {
  color: black;
  padding: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.