dabblet use example

dabblet.css

.block {  
  text-align: justify;
  
  background-color: #DDD;
  border: 2px black solid;
  border-radius: 10px;
}

.lightbox {
  width: 90px;
  height: 20px;
  padding: 5px;
  overflow: hidden;
  
  -webkit-transition: 1s height, 1s 1s width;
  transition: 1s height, 1s 1s width;
}

.lightbox:hover {
  width: 300px;
  height: 220px;
  
  -webkit-transition: 1s width, 1s 1s height;
  transition: 1s width, 1s 1s height;
}

dabblet.html

<div class="lightbox block">
    <span class="label label-info">Hover me...</span>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vero hic ipsum ab doloremque libero veritatis vitae exercitationem minus quidem facere laboriosam pariatur. Quas atque dolorum iure quos delectus ullam!
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <p>
      Credits to <a href="http://www.youtube.com/watch?v=3ikye7Qc7Ak">Lea Verou's talk</a> for this one.
    </p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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