caption 1

by voodoomonkey

HTML

<a class="caption" href="http://cargocollective.com/jaimemartinez/Illustration" data-title="Vulture" data-description="I felt compelled to walk on and find the place of these sounds, and when the forest did clear I was standing on a hill. Before me, there was a great plain. Upon it, the armies of the world, standing, waiting."><img src="http://tympanus.net/Tutorials/PseudoElementsImageCaptions/images/3.jpg" alt="Illustration of Vulture"/></a>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #89867e;
	background: #f9f9f9;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

a {
    text-decoration: none;
    outline: none;
}

a img {
    border: none;
}

.caption {
    -webkit-backface-visibility: hidden; /* prevent flash when embedding fiddle */
	display: inline-block;
	position: relative;
	margin: 10px;
	overflow: hidden;
	background: #000;
}

.caption img {
	display: block;
	max-width: 100%;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.caption:hover img {
	opacity: 0.5;
}

.caption::after,
.caption::before {
	position: absolute;
	width: 100%;
	height: 50%;
	color: #fff;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

.caption::after {
	content: attr(data-title);
	top: 0;
	background: #0083ab;
	font-size: 40px;
	font-weight: 300;
	padding: 30px;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

.caption::before {
	content: '...' attr(data-description) '...';
	top: 50%;
	background: #f27545;
	font-size: 14px;
	padding: 20px;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
}

.caption:hover::after,
.caption:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}