Untitled

dabblet.css

aside {
	display:inline-table; 
	padding:0 2em;
	background:#159;
	height:10em;
	width:13em;
	margin:0.5em;
	}
aside figure {
display:table-cell;
vertical-align:middle;
position:relative;
}
aside figure img {position:absolute;top:1em;left:0em;max-height:8em;width:13em}
aside figure figcaption {position:relative;z-index:1;margin:0 ;}
aside figure figcaption:after {content:'';
border:0.5rem solid red;
position:absolute;
right:-1rem;
height:0;font-size:0;overflow:hidden;
border-right:solid transparent 0.5rem;
border-bottom:solid transparent 0.5rem;
}
aside figure figcaption h3 {
text-align:center;
text-shadow:1px 1px white;
box-shadow: 10px 10px 15px -10px;
overflow:hidden;margin:0 -1rem 0 -1em;
position:relative;
z-index:1}
aside figure figcaption h3:before {content:'';
position:absolute;
transform:rotate(45deg);
height:1.25em;
width:1.25em;
left:-0.62em;
box-shadow: 0 0 0 800px tomato, inset -1px 1px 5px;
z-index:-1;
}
html {font-size:2em;}

dabblet.html

<aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/casa-tre/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/casa-tre/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/casa-tre/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/casa-tre/_img/copertina.jpg" />
</figure>
</aside><aside>
<figure>
<figcaption>
<h3>title center</h3>
</figcaption>
<img src="http://www.piermariagiordani.it/progetti/architettura/casa-tre/_img/copertina.jpg" />
</figure>
</aside>

dabblet.js

// alert('Hello world!');

settings.json

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