kandeefloss

/**
 * Delayed transitions
 */

.container { font: 14px sans-serif; width: 11em; height: 10em; background: #eee; position: relative; }
.title, .content { position: absolute; left: 1em; right: 0em; background: orange; color: white; padding: .5em 1em; }

.title { top: 7em; transition: all .3s .3s; }
.content { top: 11em; transition: all .3s; }
.container:hover .title { top: 1em; transition: all .3s; }

kandeefloss

div {
	background-color: #900;
	background-image: linear-gradient(top, #c60000, #b30000 50%, #990000 50%, #990000);
	width: 400px;
	height: 200px;
	position: relative
}

div:before {
	content: '';

kandeefloss

.box {
	position: relative;
	width: 300px;
	height: 200px;
	border: 1px solid #cfcfcf;
	background: #fafafa;
	margin: 50px 5px;
	float: left;
}