translateY() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* The area where the box lives */
.container {
  width: 100%;
  height: 300px;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Start at the top */
  padding-top: 20px;
}

/* The element we are moving */
.moving-box {
  width: 150px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: sans-serif;
  
  /* Smoothly animate the transform property over 0.5 seconds */
  transition: transform 0.5s ease-in-out;
}

/* When the container is hovered, move the box */
.container:hover .moving-box {
  /* Positive value moves it DOWN 100 pixels */
  transform: translateY(100px);
  background-color: #2ecc71;
}</style></head><body><div class="container">
  <div class="moving-box">
    Hover over me!
  </div>
</div></body></html>