Edit in JSFiddle

<div class="envelope">
  <div class="letter">
    Pin www.sean-lan.com to your bookmark bar, <br>and sharp your tech skills.
  </div>
</div>
.envelope {
  position: relative;
  background-color: #faebd6;
  border-top: 10px solid gold;
  border-bottom: 10px solid gold;
  color: #faebd6;
  width: 40px;
  max-width: 800px;
  overflow: hidden;
  transition: width 1s ease-in-out, background-color 2s ease-in 1s, color 2s ease-out 1s;
}

.envelope:before {
  content: "";
  background-color: red;
  position: absolute;
  top: 40px;
  left: 0px;
  bottom: 40px;
  width: 40px;
}

.envelope:hover {
  width: 800px;
  color: #fff;
  background-color: #222;
}
.envelope:after {
  content: "";
  background-color: red;
  position: absolute;
  top: 40px;
  right: 0px;
  bottom: 40px;
  width: 40px;
}
.letter {
  font-family: sans-serif;
  font-weight: 900;
  font-size: 2em;
  padding: 60px;
  height: 100%;
  
  white-space:nowrap;
}