Untitled

dabblet.css

div {
  height: 200px;
  background: #eee;
  position: realtive;
}

p {
  position: absolute;
  left: 10%;
  margin: 0px 0 0 0px;
  opacity: 0;
  top: 60px;
  
  font: bold 50px/1 Helvetica, sans-serif;
}

p:nth-child(1) {
  opacity: 1;
  -webkit-transition: opacity 1s ease 3s;
}

div:hover p:nth-child(1) {
  opacity: 0;
  -webkit-transition: opacity 1s ease;
}

p:nth-child(2) {
  -webkit-transition: opacity 1s ease 1s;
}

div:hover p:nth-child(2) {
  opacity: 1;
}

p:nth-child(3) {
  top: 120px;
  -webkit-transition: opacity 1s ease 2s;
}

div:hover p:nth-child(3) {
  opacity: 1;
}

dabblet.html

<div>
  <p>Hover Here</p>
  <p>Greetings!</p>
  <p>How Are You?</p>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}