Background and opacity transitions

dabblet.css

/**
 * Background and opacity transitions
 */
.container {
	background: rgba( 255, 150, 10, 100);
	overflow: hidden;
}

.box {
	float: left;
	margin: 10px;
	background: rgba(100,150,30,0.5);
	width: 200px;
	height:200px;
	transition: all 0.3s ease-in;
}

.container:hover .bg-hide,
.bg-hide:hover {
	background: rgba(0,0,0,0);
}

.container:hover .hide,
.hide:hover {
	opacity: 0;
}

dabblet.html

<div class="box hide">This box dissappears completely </div>
<div class="box bg-hide">This box's background fades out</div>

<div class="container">
	<div class="box hide">This box dissappears completely </div>
	<div class="box bg-hide">This box's background fades out</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}