<div class="box">
  <span class="box__blurb">I'm a Box</span>
  <span class="rect__blurb">I'm a Rectangle</span>
</div>

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333;
  font-family: 'Lato', sans-serif;
}

.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 150px;
  height: 150px;
  background-color: red;
  color: white;
  box-shadow: 5px 5px 25px #000;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  transition: 
    all 1s;
  .box__blurb {
    opacity: 1;
    transform: translateX(45px);
    transition:
      opacity 0.5s 2s,
      transform 0.5s 0.5s;
  }
  .rect__blurb {
    opacity: 0;
    transform: translateX(500px);
    transition: 
      opacity 0.5s 1s,
      transform 0.5s 1s;
  }
  &:hover {
    width: 300px;
    background-color: orange;
    box-shadow: -5px 5px 25px #000;
    .box__blurb {
      opacity: 0;
      transform: translateX(-500px);
    }
    .rect__blurb {
      opacity: 1;
      transform: translateX(-100px);
    }
  }
}