The first commented line is your codelet’s title

dabblet.css

/**
 * The first commented line is your codelet’s title
 */
  #outerspace {
    position: relative;
    height: 400px;
    background: #0c0440;
  }
  
  div.rocket {
    position: absolute;
    bottom: 10px;
    left: 20px;
    -webkit-transition: all 3s ease-in;
    -moz-transition: all 3s ease-in;
    -o-transition: all 3s ease-in;
    -ms-transition: all 3s ease-in;
    transition: all 3s ease-in;
  }
  div.rocket img {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
  }
  #outerspace:hover div.rocket {
    -webkit-transform: translate(540px,-200px);
    -moz-transform: translate(540px,-200px);
    -o-transform: translate(540px,-200px);
    -ms-transform: translate(540px,-200px);
    transition: all 2s ease-in-out;
  }
  #outerspace:hover div.rocket img {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    transform: rotate(70deg);
  }
  

dabblet.html

<div id="outerspace">
<div class="rocket">
<img src="/images/rocket.gif" width="92" height="215" alt="rocket animation">
.rocket
</div> <a class="_hootified" a="" href="#" #outerspace"="" onclick="javascript:var e = document.createEvent(&quot;CustomEvent&quot;); e.initCustomEvent(&quot;hootletEvent&quot;, true, true, {type: &quot;hash&quot;, value: &quot;#outerspace&quot;});  document.body.dispatchEvent(e); return false;">#outerspace</a> </div>

dabblet.js

// alert('Hello world!');

settings.json

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