Image with an on hover fade in-out caption.

dabblet.css

/**
 * Image with an on hover fade in-out caption.
 */

@import url(http://fonts.googleapis.com/css?family=Oswald);

/**
 * Natural box-model
 */

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}


a.featured-box {
	display: block;
	float: left;
	width: 328px;
	height: 200px;
	margin: 10px 10px;
	background-color: #BBB;
	background-position: center;
	text-decoration: none;
}

div.featured-box-overlay {
	opacity: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: relative;
  -webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
	color: white;
	padding: 15px;
	border-left: 10px solid orange;
}

div.featured-box-overlay h2 {
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-family: Oswald, Arial;
	text-transform: uppercase;
}

div.featured-box-overlay p {
	font-size: 13px;
	font-family: Verdana, "Bitstream Vera Sans", sans-serif;
}

div.featured-box-overlay h5 {
	position: absolute;
	bottom: 5px;
	left: 0;
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 0px;
	font-family: Oswald, Arial;
}

a.featured-box:hover div.featured-box-overlay {
	opacity: 1;
}

dabblet.html

				<a href="#" class="featured-box" style="background-image: url(http://lorempixel.com/355/225/)">
					<div class="featured-box-overlay">
						<h2>Lorem ipsum dolor</h2>
						<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
						<h5>- click to read more -</h5>
					</div>
				</a>
				
				<a href="#" class="featured-box" style="background-image: url(http://lorempixel.com/370/240/)">
					<div class="featured-box-overlay">
						<h2>Lorem ipsum dolor</h2>
						<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
						<h5>- click to read more -</h5>
					</div>
				</a>
				
				<div>
				<a href="#" class="featured-box" style="background-image: url(http://lorempixel.com/360/230/)">
					<div class="featured-box-overlay">
						<h2>Lorem ipsum dolor</h2>
						<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
						<h5>- click to read more -</h5>
					</div>
				</a>

settings.json

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