rlugojr/index.html

## index.html
<html>
<body>
	<main>
		<section id="container">
			<div class="thumbnail"
				data-title="Bacon"
				data-description="Bacon ipsum dolor amet filet mignon alcatra short ribs, sausage shoulder tail biltong rump chicken ground round ham hock porchetta tri-tip. Boudin bresaola andouille, leberkas pork ball tip turducken beef ribs">
				<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/meat.jpg" alt="Meat" width="300">
			</div>
		</section>
	</main>
</body>
</html>

## style.css
/* DEMO STYLING */
*, *:after, *:before {
	box-sizing: border-box;
}
html {
	height: 100%;
	font-size: 62.5%;
}
body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Lato, sans-serif;
	font-size: 1.8rem;
	background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%);
	user-select: none;
}
h1 {
	font-family: Merriweather, serif;
	margin: 0 0 50px;
	cursor: default;
}
#container {
	width: 300px;
	margin: 0 auto;
}


.thumbnail {
	-webkit-backface-visibility: hidden;
	display: inline-block;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	background: #000;
	box-shadow: 0 15px 50px rgba(0,0,0,.5);
}
.thumbnail img {
	display: block;
	max-width: 100%;
	transition: opacity .2s ease-in-out;
}
.thumbnail:hover img {
	opacity: .5;
}
.thumbnail::after,
.thumbnail::before {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 50%;
	transition: transform .4s ease-out;
	color: #fff;
}
.thumbnail::after {
	content: attr(data-title);
	top: 0;
	padding-top: 55px;
	transform: translateY(-100%) scale(.8);
	background: rgba(0,0,0,.4);
	font-size: 3.5rem;
	font-weight: 300;
	font-family: Merriweather, serif;
	text-align: center;
}
.thumbnail::before {
	content: attr(data-description) "…";
	top: 50%;
	padding: 20px;
	transform: translateY(100%) scale(.8);
	background: rgba(107,38,68,.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #f1f1f1;
	font-size: 1.5rem;
}
.thumbnail:hover::after,
.thumbnail:hover::before {
	transform: translateY(0%) scale(1);
}

## styles
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,700" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" />

## thumbnail-with-animated-captions.markdown

      
                Raw

        
              thumbnail-with-animated-captions.markdown
            
          
    Thumbnail with Animated Captions
In combination with data attributes, you can build a thumbnail image with title and description using just one single line of HTML code.
A Pen by SitePoint on CodePen.
License.
	<html>
	<body>
	<main>
	<section id="container">
	<div class="thumbnail"
	data-title="Bacon"
	data-description="Bacon ipsum dolor amet filet mignon alcatra short ribs, sausage shoulder tail biltong rump chicken ground round ham hock porchetta tri-tip. Boudin bresaola andouille, leberkas pork ball tip turducken beef ribs">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/meat.jpg" alt="Meat" width="300">
	</div>
	</section>
	</main>
	</body>
	</html>
	/* DEMO STYLING */
	, :after, *:before {
	box-sizing: border-box;
	}
	html {
	height: 100%;
	font-size: 62.5%;
	}
	body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Lato, sans-serif;
	font-size: 1.8rem;
	background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%);
	user-select: none;
	}
	h1 {
	font-family: Merriweather, serif;
	margin: 0 0 50px;
	cursor: default;
	}
	#container {
	width: 300px;
	margin: 0 auto;
	}





	.thumbnail {
	-webkit-backface-visibility: hidden;
	display: inline-block;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	background: #000;
	box-shadow: 0 15px 50px rgba(0,0,0,.5);
	}
	.thumbnail img {
	display: block;
	max-width: 100%;
	transition: opacity .2s ease-in-out;
	}
	.thumbnail:hover img {
	opacity: .5;
	}
	.thumbnail::after,
	.thumbnail::before {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 50%;
	transition: transform .4s ease-out;
	color: #fff;
	}
	.thumbnail::after {
	content: attr(data-title);
	top: 0;
	padding-top: 55px;
	transform: translateY(-100%) scale(.8);
	background: rgba(0,0,0,.4);
	font-size: 3.5rem;
	font-weight: 300;
	font-family: Merriweather, serif;
	text-align: center;
	}
	.thumbnail::before {
	content: attr(data-description) "…";
	top: 50%;
	padding: 20px;
	transform: translateY(100%) scale(.8);
	background: rgba(107,38,68,.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #f1f1f1;
	font-size: 1.5rem;
	}
	.thumbnail:hover::after,
	.thumbnail:hover::before {
	transform: translateY(0%) scale(1);
	}
	<link href="https://fonts.googleapis.com/css?family=Merriweather:300,700" rel="stylesheet" />
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" />