tkbremnes/dabblet.css

## dabblet.css
/**
 * My blog redesign
 */

@import url(http://fonts.googleapis.com/css?family=PT+Sans|PT+Serif);

h1, h2, h3, h4, h5, h6 {
	font-family: PT Sans, Helvetica, Arial, sans-serif;
	text-shadow: #fff 0 1px 0;
}

p {
	font-family: PT Serif, serif;
	text-shadow: #fff 0 1px 0;
}

a {
	color: #39c;
	transition: color linear 0.1s;
}

a:hover, a:focus {
	text-decoration: none;
	color: #5ddaff;
}

body {
	background: #ddd;
}

.subtle_shadow {
	box-shadow: #444 0 1px 5px;
}

#media_wrapper {
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 1em;
	position: relative;
}

.media_image {
	border: 1px solid #ccc;
	max-width: 100%;
	padding: 0; margin: 0;
}

.media {
	padding: 0; margin: 0;
}

figcaption {
	text-align: center;
}

.media:hover #meta{
	height: 417px;
	transition-delay: 0.4s;
}

.media:hover #meta ul {
	opacity: 1;
	transition: opacity ease-out 0.1s;
}

#meta {
	width:740px;
	height: 0;
	position: absolute;
	top: 1em;
	left: 1em;
	background: #000;
	opacity: 0.7;
	transition: height ease 0.4s;
	transition-delay: 0;
	overflow: hidden;
}

#meta ul {
	decoration: none;
	color: white;
	opacity: 0;
	transition: opacity ease-in 0.2s;
	transition-delay: 0.2s;
}

#meta2 {
	position: absolute;
	top: 1em;
	background: #000;
	height: 417px;
	width: 0px;
	opacity: 0.7;
	transition: width ease-out 0.5s;
	transition-delay: 0;
	overflow: hidden;
}

.media:hover #meta2 {
	width: 150px;
}

.media:hover #meta2:after {
	opacity: 1;
}

#meta2:after {
	content:"";
	height: 50px;
	width: 50px;
	background: #000;
	position: absolute;
	top: 180px;
	left: 60px;
	border-style: solid;
	border-color: white;
	border-width: 0 0 15px 15px;
	transform: rotate(45deg);
	opacity: 1;
	transition: opacity linear 1s;
}

#meta2:after:hover {
	background: yellow;
}

#meta2 ul{
	visibility: hidden;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<article>
<h1>Hello world</h1>

<div id="media_wrapper" class="subtle_shadow rounded_corners">
	<figure class="media">
		<img class="media_image" src="http://i.imgur.com/0J0cp.jpg">
		<figcaption>Media here<figcaption>

		<div id="meta2">
			<ul>
				<li>Save
				<li>Zoom
				<li>Whatevs
			</ul>
		</div>
	</figure>
</div>

<p>Hello world, this is a <a href="#">link</a>.</p>

## settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
	/**
	* My blog redesign
	*/

	@import url(http://fonts.googleapis.com/css?family=PT+Sans\|PT+Serif);

	h1, h2, h3, h4, h5, h6 {
	font-family: PT Sans, Helvetica, Arial, sans-serif;
	text-shadow: #fff 0 1px 0;
	}

	p {
	font-family: PT Serif, serif;
	text-shadow: #fff 0 1px 0;
	}

	a {
	color: #39c;
	transition: color linear 0.1s;
	}

	a:hover, a:focus {
	text-decoration: none;
	color: #5ddaff;
	}

	body {
	background: #ddd;
	}

	.subtle_shadow {
	box-shadow: #444 0 1px 5px;
	}

	#media_wrapper {
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 1em;
	position: relative;
	}

	.media_image {
	border: 1px solid #ccc;
	max-width: 100%;
	padding: 0; margin: 0;
	}

	.media {
	padding: 0; margin: 0;
	}

	figcaption {
	text-align: center;
	}

	.media:hover #meta{
	height: 417px;
	transition-delay: 0.4s;
	}

	.media:hover #meta ul {
	opacity: 1;
	transition: opacity ease-out 0.1s;
	}

	#meta {
	width:740px;
	height: 0;
	position: absolute;
	top: 1em;
	left: 1em;
	background: #000;
	opacity: 0.7;
	transition: height ease 0.4s;
	transition-delay: 0;
	overflow: hidden;
	}

	#meta ul {
	decoration: none;
	color: white;
	opacity: 0;
	transition: opacity ease-in 0.2s;
	transition-delay: 0.2s;
	}

	#meta2 {
	position: absolute;
	top: 1em;
	background: #000;
	height: 417px;
	width: 0px;
	opacity: 0.7;
	transition: width ease-out 0.5s;
	transition-delay: 0;
	overflow: hidden;
	}

	.media:hover #meta2 {
	width: 150px;
	}

	.media:hover #meta2:after {
	opacity: 1;
	}

	#meta2:after {
	content:"";
	height: 50px;
	width: 50px;
	background: #000;
	position: absolute;
	top: 180px;
	left: 60px;
	border-style: solid;
	border-color: white;
	border-width: 0 0 15px 15px;
	transform: rotate(45deg);
	opacity: 1;
	transition: opacity linear 1s;
	}

	#meta2:after:hover {
	background: yellow;
	}

	#meta2 ul{
	visibility: hidden;
	}
	<!-- content to be placed inside <body>…</body> -->

	<article>
	<h1>Hello world</h1>

	<div id="media_wrapper" class="subtle_shadow rounded_corners">
	<figure class="media">
	<img class="media_image" src="http://i.imgur.com/0J0cp.jpg">
	<figcaption>Media here<figcaption>

	<div id="meta2">
	<ul>
	<li>Save
	<li>Zoom
	<li>Whatevs
	</ul>
	</div>
	</figure>
	</div>

	<p>Hello world, this is a <a href="#">link</a>.</p>