dziudek/dabblet.css

## dabblet.css
/**
 * :hover overlay effect with using :after instead of additional element
 **/

body > div {
	width: 100px;
	height: 100px;
	background: #eee;
	margin: 100px;
}

body > div:after {
	content: "Preview";
	width:100px;
	height:100px;
	display:block;
	background: #ff0;
	text-align:center;
	line-height:100px;
	opacity:0;
	transition: all 0.5s linear;

}
body > div:hover:after {
	opacity: 1.0;
}

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

## settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* :hover overlay effect with using :after instead of additional element
	**/

	body > div {
	width: 100px;
	height: 100px;
	background: #eee;
	margin: 100px;
	}

	body > div:after {
	content: "Preview";
	width:100px;
	height:100px;
	display:block;
	background: #ff0;
	text-align:center;
	line-height:100px;
	opacity:0;
	transition: all 0.5s linear;

	}
	body > div:hover:after {
	opacity: 1.0;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div></div>