Untitled

dabblet.css

* {margin: 0; padding: 0;}

body {background: #222;}

/*GALLERY*/
.gallery {
   width: 62.5rem;
   margin: 10rem auto auto 1rem;
}

ul {list-style: none;}

.gallery li {
   height: 15rem;
   width: 5rem;
   margin: 1.0rem;
   float: left;
}

.gallery li p {
	color: white;
	text-align: left;
	font: 0.8rem/1 Helvetica, Verdana, sans-serif;
}

.gallery div {
	margin-bottom: 0.5rem;
	height: 5rem;
	width: 5rem;
	overflow: hidden;
    border-radius: 8%;
    transform:  translate(0%, 0%)
}
 
.gallery li img {
	transform-origin: center center;
    transform:  translate(-45%, -30%) scale(0.75);
	transition: all 1.5s ease-out;
}

.gallery div:hover img {
    transform:  translate(-45%, -35%) scale(0.35);
}

dabblet.html

<div class="gallery">    
	<ul>        
		<li>
			<a href="http://willkempartschool.com/urban-sketching-tutorial-for-beginners" target="_blank">
				<div><img src="http://willkempartschool.com/wp-content/uploads/2015/09/pen-bike-sketch-detail-small.jpg"/></div>
			</a>
			<p>Urban sketching for beginners (Will Kemp Art School).</p></li>
		<li>
			<a href="http://willkempartschool.com/how-to-shade-a-drawing-light-shadow-part-2" target="_blank">
				<div><img src="http://willkempartschool.com/wp-content/uploads/2014/03/finished-apple-drawing-tutorial.jpg"/></div>
			</a>
			<p>Drawing light &amp; shadow (Will Kemp Art School).</p>
		</li>
		<li>
			<a href="http://willkempartschool.com/an-art-material-addicts-guide-to-becoming-a-minimalist-urban-sketcher" target="_blank">
				<div><img src="http://willkempartschool.com/wp-content/uploads/2015/10/brushpen-on-table.jpg"/></div>
			</a>
			<p>Urban sketch&mdash;Using minimal materials (Will Kemp Art School).</p>
		</li>
		<li>
			<a href="https://pencils.com/how-to-use-pencils" target="_blank">
				<div><img src="https://36z9yt2c7y8f2f8nht38fgt3173q-wpengine.netdna-ssl.com/wp-content/uploads/2012/09/ChiselPoint.jpg"/></div>
			</a>
			<p>Excellent basic tutorials (Pencils.com).</p>
		</li>
		<li>
			<a href="http://web.mit.edu/2.009/www/resources/sketchingTutorials.html" target="_blank">
				<div><img src="http://web.mit.edu/2.009/www/includes_2015/images/banner.png" /></div>
			</a>
			<p>Sketch tutorial videos (MIT Product Engineering course).</p>
		</li>
		<li>
			<a href="https://www.derwentart.com/en/gb/7559/hints-tips" target="_blank">
				<div><img src="http://az31609.vo.msecnd.net/assets/images/widgetImages/226644dcde1f2-0c71-4320-a42c-fc279d9b5b77.jpg"/></div>
			</a>
			<p>Hints and tips (Derwent).</p>
		</li>
		<li>
			<a href="http://www.urbansketching.com/urban-sketching-tutorial-starting-a-sketch.html" target="_blank">
				<div><img src="http://www.urbansketching.com/uploads/3/4/6/3/3463003/3864390_orig.jpg"/></div>
			</a>
			<p>Starting a sketch (UrbanSketching.com).</p>
		</li>
	</ul>
<div>

dabblet.js

// alert('Hello world!');

settings.json

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