The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

.teaser {
  overflow: hidden;
  height: 250px;
  display: inline-block;
  position: relative;
}

.teaser .text {
  position: absolute;
  top: 0;
  xwidth: 100%;
  height: 250px;
  margin-top: 200px;
  background: grey;
  transition: margin 0.5s;
}
.teaser:focus .text,
.teaser:hover .text {
  margin-top: 0;
}

dabblet.html

<div class="teaser" tabindex="-1">
  <img src="http://placehold.it/200x200">
  <div class="text">
    Hello World
  </div>
</div>

<div class="teaser" tabindex="-1">
  <img src="http://placehold.it/200x200">
  <div class="text">
    Hello World
  </div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}