Untitled

dabblet.css

* {margin: 0; padding: 0;}

body {
   background: #222;}

/*GALLERY*/
.gallery {
   width: 1000px;
   margin: 50px auto;}

ul {
	list-style: none;}

.gallery li {
   height: 200px;
   width: 200px;
   margin: 25px;
   float: left;
   overflow: hidden;
   border-radius: 50%;}

.gallery li p {
	width: 100px;
	padding: 20px;
	position: relative;
	top: 110%;
	left: 15%;
	z-index: 1;
	color: white;
	text-align: center;
	text-transform: uppercase;
	font: bold 18px/1 Helvetica, Verdana, sans-serif;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
	transition: top 0.5s ease;}

.gallery li img {
	margin-top: -70px;
	z-index: -1;
	transition: margin 1.5s ease;}

.gallery li:hover p {
   top: 75%;}

.gallery li:hover img {
   margin-left: -150px;
   margin-top: -150px;}

dabblet.html

<div class="gallery">
    <ul>
        <li><p>One</p><img src="http://lorempixel.com/400/400/sports/1" /></li>
        <li><p>Two</p><img src="http://lorempixel.com/400/400/sports/2" /></li>
        <li><p>Three</p><img src="http://lorempixel.com/400/400/sports/3" /></li>
        <li><p>Four</p><img src="http://lorempixel.com/400/400/sports/4" /></li>
        <li><p>Five</p><img src="http://lorempixel.com/400/400/sports/5" /></li>
        <li><p>Six</p><img src="http://lorempixel.com/400/400/sports/6" /></li>
        <li><p>Seven</p><img src="http://lorempixel.com/400/400/sports/7" /></li>
        <li><p>Eight</p><img src="http://lorempixel.com/400/400/sports/8" /></li>
     </ul>
 </div>

dabblet.js

// alert('Hello world!');

settings.json

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