The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
html {
background: #333;
min-height: 100%;
}
body {}
img {vertical-align:top;width:200px;border-radius:0;transition:1s;}
figure {display:inline-block;
margin:0;
position:relative;
z-index:1;
transition:1s;
border-radius:0px;
transform:scale(1);
overflow:hidden;
box-shadow:inset 0 0 0 1px #333, inset 0 0 0 2px #999;
padding:2px;
}
figcaption {position:absolute;bottom:0;left:0;right:0;letter-spacing:1px;
background:rgba(255,255,255,0.3) linear-gradient(rgba(0,0,0,0.3),#fff);
border:solid 1px gray;
box-shadow:0 0 1px 0px  #333;
text-align:center;
text-shadow:0 0 1px #333;
max-height:0;
transition:3s;
border-radius:1em;}
figure:hover figcaption {
max-height:200px;
transition:10s;
bottom:220px;
}
figure:hover img {
border-radius:100%;
transition:1s;}
figure:hover {
transition:1s;
transform:scale(2);
z-index:5;
border-radius:100%;
}

section {
margin:100px;
display:table;
font-size:0.5em;color:black;}
form {max-width:1350px;margin:auto;color:gold;font-size:2em;}
label {display:list-item;
float:left;
clear:left;
margin:0.2em 1em;
padding:0;
width:3em;
}
label:focus {color:purple;}
label:first-of-type {margin-top:100px;}
input[type="radio"] {display:none;}
 section figure {height:0;width:0;transition:1s;padding:0;}
input[id="city"]:checked ~ section .city ,
input[id="fashion"]:checked ~ section .fashion,
input[id="animals"]:checked ~ section .animals
 ,input[id="sport"]:checked ~ section .sport
 ,input[id="people"]:checked ~ section .people
 ,input[id="nightlife"]:checked ~ section .nightlife
 ,input[id="transport"]:checked ~ section .transport
 ,input[id="nature"]:checked ~ section .nature
 ,input[id="food"]:checked ~ section .food
 ,input[id="abstract"]:checked ~ section .abstract
 ,input[id="technics"]:checked ~ section .technics
 ,input[id="tous"]:checked ~ section figure 
 
{height:200px;width:200px;transition:1s;padding:2px;}

dabblet.html

<form>
<fieldset>
<legend>galerie</legend>
<input type="radio" value="tous" id="tous" name="select-gal"/><label for="tous" tabindex="0">Tous</label>
<label for="aucune" tabindex="0">Aucune</label><input type="radio" value="aucune" id="aucune" name="select-gal"/>
<label for="sport" tabindex="0">Sport</label><input type="radio" value="sport" id="sport" name="select-gal"/>
<label for="people" tabindex="0">People</label><input type="radio" value="people" id="people" name="select-gal" />
<label for="food" tabindex="0">Food</label><input type="radio" value="food" id="food" name="select-gal"/>
<label for="technics" tabindex="0">Technics</label><input type="radio" value="technics" id="technics" name="select-gal"/>
<label for="nature" tabindex="0">Nature</label><input type="radio" value="nature" id="nature" name="select-gal"/>
<label for="abstract" tabindex="0">Abstract</label><input type="radio" value="abstract" id="abstract" name="select-gal"/>
<label for="nightlife" tabindex="0">Nightlife</label><input type="radio" value="nightlife" id="nightlife" name="select-gal"/>
<label for="animals" tabindex="0">Animals</label><input type="radio" value="animals" id="animals" name="select-gal"/>
<label for="city" tabindex="0">City</label><input type="radio" value="city" id="city" name="select-gal"/>
<label for="transport" tabindex="0">Transport</label><input type="radio" value="transport" id="transport" name="select-gal"/>
<label for="fashion" tabindex="0">Fashion</label><input type="radio" value="fashion" id="fashion" name="select-gal"/>


<section>
<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/1" alt="sport1" />
<figcaption><p>image sport 1 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/1" alt="people1" />
<figcaption><p>image people 1 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/1" alt="nature1" />
<figcaption><p>image nature 1 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/1" alt="abstract1" />
<figcaption><p>image abstract 1 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/1" alt="food1" />
<figcaption><p>image food 1 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/1" alt="technics1" />
<figcaption><p>image technics 1 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/1" alt="transport1" />
<figcaption><p>image transport 1 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/1" alt="fashion1" />
<figcaption><p>image fashion 1 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/1" alt="nightlife1" />
<figcaption><p>image nightlife 1 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/1" alt="animals1" />
<figcaption><p>image animals 1 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/1" alt="city1" />
<figcaption><p>image city 1 </p></figcaption>
</figure>
<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/2" alt="sport2" />
<figcaption><p>image sport 2 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/2" alt="people2" />
<figcaption><p>image people 2 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/2" alt="nature2" />
<figcaption><p>image nature 2 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/2" alt="abstract2" />
<figcaption><p>image abstract 2 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/2" alt="food2" />
<figcaption><p>image food 2 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/2" alt="technics2" />
<figcaption><p>image technics 2 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/2" alt="transport2" />
<figcaption><p>image transport 2 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/2" alt="fashion2" />
<figcaption><p>image fashion 2 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/2" alt="nightlife2" />
<figcaption><p>image nightlife 2 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/2" alt="animals2" />
<figcaption><p>image animals 2 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/2" alt="city2" />
<figcaption><p>image city 2 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/3" alt="sport3" />
<figcaption><p>image sport 3 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/3" alt="people3" />
<figcaption><p>image people 3 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/3" alt="nature3" />
<figcaption><p>image nature 3 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/3" alt="abstract3" />
<figcaption><p>image abstract 3 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/3" alt="food3" />
<figcaption><p>image food 3 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/3" alt="technics3" />
<figcaption><p>image technics 3 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/3" alt="transport3" />
<figcaption><p>image transport 3 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/3" alt="fashion3" />
<figcaption><p>image fashion 3 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/3" alt="nightlife3" />
<figcaption><p>image nightlife 3 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/3" alt="animals3" />
<figcaption><p>image animals 3 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/3" alt="city3" />
<figcaption><p>image city 3 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/4" alt="sport4" />
<figcaption><p>image sport 4 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/4" alt="people4" />
<figcaption><p>image people 4 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/4" alt="nature4" />
<figcaption><p>image nature 4 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/4" alt="abstract4" />
<figcaption><p>image abstract 4 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/4" alt="food4" />
<figcaption><p>image food 4 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/4" alt="technics4" />
<figcaption><p>image technics 4 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/4" alt="transport4" />
<figcaption><p>image transport 4 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/4" alt="fashion4" />
<figcaption><p>image fashion 4 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/4" alt="nightlife4" />
<figcaption><p>image nightlife 4 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/4" alt="animals4" />
<figcaption><p>image animals 4 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/4" alt="city4" />
<figcaption><p>image city 4 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/5" alt="sport5" />
<figcaption><p>image sport 5 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/5" alt="people5" />
<figcaption><p>image people 5 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/5" alt="nature5" />
<figcaption><p>image nature 5 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/5" alt="abstract5" />
<figcaption><p>image abstract 5 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/5" alt="food5" />
<figcaption><p>image food 5 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/5" alt="technics5" />
<figcaption><p>image technics 5 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/5" alt="transport5" />
<figcaption><p>image transport 5 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/5" alt="fashion5" />
<figcaption><p>image fashion 5 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/5" alt="nightlife5" />
<figcaption><p>image nightlife 5 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/5" alt="animals5" />
<figcaption><p>image animals 5 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/5" alt="city5" />
<figcaption><p>image city 5 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/6" alt="sport6" />
<figcaption><p>image sport 6 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/6" alt="people6" />
<figcaption><p>image people 6 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/6" alt="nature6" />
<figcaption><p>image nature 6 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/6" alt="abstract6" />
<figcaption><p>image abstract 6 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/6" alt="food6" />
<figcaption><p>image food 6 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/6" alt="technics6" />
<figcaption><p>image technics 6 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/6" alt="transport6" />
<figcaption><p>image transport 6 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/6" alt="fashion6" />
<figcaption><p>image fashion 6 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/6" alt="nightlife6" />
<figcaption><p>image nightlife 6 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/6" alt="animals6" />
<figcaption><p>image animals 6 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/6" alt="city6" />
<figcaption><p>image city 6 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/7" alt="sport7" />
<figcaption><p>image sport 7 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/7" alt="people7" />
<figcaption><p>image people 7 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/7" alt="nature7" />
<figcaption><p>image nature 7 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/7" alt="abstract7" />
<figcaption><p>image abstract 7 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/7" alt="food7" />
<figcaption><p>image food 7 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/7" alt="technics7" />
<figcaption><p>image technics 7 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/7" alt="transport7" />
<figcaption><p>image transport 7 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/7" alt="fashion7" />
<figcaption><p>image fashion 7 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/7" alt="nightlife7" />
<figcaption><p>image nightlife 7 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/7" alt="animals7" />
<figcaption><p>image animals 7 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/7" alt="city7" />
<figcaption><p>image city 7 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/8" alt="sport8" />
<figcaption><p>image sport 8 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/8" alt="people8" />
<figcaption><p>image people 8 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/8" alt="nature8" />
<figcaption><p>image nature 8 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/8" alt="abstract8" />
<figcaption><p>image abstract 8 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/8" alt="food8" />
<figcaption><p>image food 8 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/8" alt="technics8" />
<figcaption><p>image technics 8 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/8" alt="transport8" />
<figcaption><p>image transport 8 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/8" alt="fashion8" />
<figcaption><p>image fashion 8 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/8" alt="nightlife8" />
<figcaption><p>image nightlife 8 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/8" alt="animals8" />
<figcaption><p>image animals 8 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/8" alt="city8" />
<figcaption><p>image city 8 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/9" alt="sport9" />
<figcaption><p>image sport 9 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/9" alt="people9" />
<figcaption><p>image people 9 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/9" alt="nature9" />
<figcaption><p>image nature 9 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/9" alt="abstract9" />
<figcaption><p>image abstract 9 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/9" alt="food9" />
<figcaption><p>image food 9 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/9" alt="technics9" />
<figcaption><p>image technics 9 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/9" alt="transport9" />
<figcaption><p>image transport 9 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/9" alt="fashion9" />
<figcaption><p>image fashion 9 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/9" alt="nightlife9" />
<figcaption><p>image nightlife 9 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/9" alt="animals9" />
<figcaption><p>image animals 9 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/9" alt="city9" />
<figcaption><p>image city 9 </p></figcaption>
</figure>

<figure class="sport" tabindex="0"><img src="http://lorempixel.com/400/400/sports/10" alt="sport10" />
<figcaption><p>image sport 10 </p></figcaption>
</figure>
<figure class="people" tabindex="0"><img src="http://lorempixel.com/400/400/people/10" alt="people10" />
<figcaption><p>image people 10 </p></figcaption>
</figure>
<figure class="nature" tabindex="0"><img src="http://lorempixel.com/400/400/nature/10" alt="nature10" />
<figcaption><p>image nature 10 </p></figcaption>
</figure>
<figure class="abstract" tabindex="0"><img src="http://lorempixel.com/400/400/abstract/10" alt="abstract10" />
<figcaption><p>image abstract 10 </p></figcaption>
</figure>
<figure class="food" tabindex="0"><img src="http://lorempixel.com/400/400/food/10" alt="food10" />
<figcaption><p>image food 10 </p></figcaption>
</figure>
<figure class="technics" tabindex="0"><img src="http://lorempixel.com/400/400/technics/10" alt="technics10" />
<figcaption><p>image technics 10 </p></figcaption>
</figure>
<figure class="transport" tabindex="0"><img src="http://lorempixel.com/400/400/transport/10" alt="transport10" />
<figcaption><p>image transport 10 </p></figcaption>
</figure>
<figure class="fashion" tabindex="0"><img src="http://lorempixel.com/400/400/fashion/10" alt="fashion10" />
<figcaption><p>image fashion 10 </p></figcaption>
</figure>
<figure class="nightlife" tabindex="0"><img src="http://lorempixel.com/400/400/nightlife/10" alt="nightlife10" />
<figcaption><p>image nightlife 10 </p></figcaption>
</figure>
<figure class="animals" tabindex="0"><img src="http://lorempixel.com/400/400/animals/10" alt="animals10" />
<figcaption><p>image animals 10 </p></figcaption>
</figure>
<figure class="city" tabindex="0"><img src="http://lorempixel.com/400/400/city/10" alt="city10" />
<figcaption><p>image city 10 </p></figcaption>
</figure>
</section>

dabblet.js

// alert('Hello world!');

settings.json

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