figcaption transition

dabblet.css

/**
 * figcaption transition
 */

figure
{
	position: relative;
	float: left;
}

img
{
	display: block;
	width: 384px;
}

figcaption
{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	font-weight: bold;
	font-size: 1.2em;
	background: rgba(255, 255, 255, 0.8);
	overflow: hidden;
	box-sizing: border-box;
	height: 0;
	padding: 0 1em;
	transition: all .5s ease-in-out;
}

figure:hover figcaption
{
	height: 4em;
	padding: 1em 1em;
}

dabblet.html

<figure>
	<img src="//bittersmann.de/tests/testbild.png" alt=""/>
	<figcaption>Testbild</figcaption>
</figure>

settings.json

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