Untitled

dabblet.css

@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
	.galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.galleryItem {width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	.galleryItem img {width: 96%;}
	.galleryItem h3 {font-size: 18px;}
	.galleryItem p, {font-size: 18px;}
}

.container {
	width: 80%;
	margin: 30px auto;
	overflow: hidden;
}

.galleryItem {
	color: #797478;
	font: 10px/1.5 Verdana, Helvetica, sans-serif;
	width: 21%;
	margin: 2% 2% 50px 2%;
	float: left;
}

.image {
	height: 100px;
	/*border-radius: 15px;*/
	overflow: hidden;
}

.image img {
	max-width: 100%;
	/*transform-origin: center center;*/
    transform:  scale(5);
	transition: all 1s ease-out;}

.image img:hover {
    transform:  scale(2.25);
    /*border-radius: 15px;*/
}

dabblet.html

<div class="container">    <div class="galleryItem">        <div class="image">            <a href="http://willkempartschool.com/urban-sketching-tutorial-for-beginners" target="_blank">                <img src="http://willkempartschool.com/wp-content/uploads/2015/09/pen-bike-sketch-detail-small.jpg" alt="URBAN SKETCH FOR BEGINNERS"/>            </a>        </div>        <h3>Urban Sketch for Beginners</h3>        <p>Urban sketching for beginners from Will Kemp Art School</p>    </div>    <div class="galleryItem">        <div class="image">            <a href="http://willkempartschool.com/an-art-material-addicts-guide-to-becoming-a-minimalist-urban-sketcher" target="_blank">                <img src="http://willkempartschool.com/wp-content/uploads/2015/10/brushpen-on-table.jpg" alt="" />            </a>        </div>        <h3>Urban Sketch Materials</h3>        <p>Urban sketch - minimal materials from Will Kemp Art School</p>    </div>    <div class="galleryItem">        <div class="image">            <a href="http://willkempartschool.com/how-to-shade-a-drawing-light-shadow-part-2" target="_blank">                <img src="http://willkempartschool.com/wp-content/uploads/2014/03/finished-apple-drawing-tutorial.jpg" alt="" />            </a>        </div>        <h3>Light and Shadow</h3>        <p>Drawing light & shadow from Will Kemp Art School</p>    </div></div>

dabblet.js

// alert('Hello world!');

settings.json

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