Rotated Crop Image

dabblet.css

/**
 * Rotated Crop Image
 */

.figure {
	display: inline-block;
	position: relative;
	transform: rotate(45deg);
	overflow: hidden;
	width: 200px;
	height: 200px;
	margin: 42px;
	}
.figure > img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -150px;
	width: 300px;
	height: 300px;
	transform: rotate(-45deg);
	}
.figure > .caption {
	font-weight: bold;
	position: absolute;
	display: inline;
	padding: 3px;
	max-width: 80%;
	color: white;
	text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
	}

dabblet.html

<div class="figure">
	<img src="http://farm8.staticflickr.com/7204/6909864199_4cbe80a195_z.jpg">
	<span class="caption">Untitled by David Crausby</span>
</div>

<div class="figure">
	<img src="http://farm8.staticflickr.com/7204/6909864199_4cbe80a195_z.jpg">
	<span class="caption">Untitled by David Crausby</span>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}