Photo set

dabblet.css

/**
 * Photo set
 */
 
.photo-grid {
	list-style: none;
	display: block;
	text-align: justify;
	max-width: 900px;
}

.photo {
	display: inline-block;
	position: relative;
	width: 200px;
	overflow: hidden;
		
	background: green;
}

.empty
{
	display: inline-block;
	width: 200px;
}

.photo-title 
{
	display: block;
	text-align: center;
}

dabblet.html

<ul class="photo-grid">

<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li>
<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://i1132.photobucket.com/albums/m566/Feargraphics/Others/150x200.png" class="photo-img">
            <span class="photo-title">bender_wants_to_kill_all_the_people</span>
        </a>
 </li>
 <li class="photo">
 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li>
 <li class="photo">
 		<a href="#" class="photo-link">
            <img src="http://i1132.photobucket.com/albums/m566/Feargraphics/Others/150x200.png" class="photo-img">
            <span class="photo-title">bender_wants_to_kill_all_the_people</span>
        </a>
 </li>
  <li class="photo"> 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li>
  <li class="photo"> 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li>
<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li>

<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li>

<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li>

<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li>
<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li>
<li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li>
  <li class="photo"> 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li>
   <li class="photo"> 		
   		<a href="#" class="photo-link">
	   		<img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li>
   <li class="photo"> 		<a href="#" class="photo-link">            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li>
   <li class="photo"> 		<a href="#" class="photo-link">            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li>
 <li class="empty"></li>
  <li class="empty"></li>
   <li class="empty"></li>
    <li class="empty"></li>
     <li class="empty"></li>
      <li class="empty"></li>
       <li class="empty"></li> 
       <li class="empty"></li>
        <li class="empty"></li>
         <li class="empty"></li>
          <li class="empty"></li>
           <li class="empty"></li>











</ul>

dabblet.js

// alert('Hello world!');

settings.json

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