A CodePen by dsmy. Excerpt Peek - A simple hover effect to reveal a content summary or post excerpt beneath a featured article image. 3 different hover effects demonstrated: static, drop down and slide in. http://codepen.io/plfstr/pen/Kyslk

index.html

<h1>Excerpt Peek</h1>	
	<p>A simple hover effect to reveal a post excerpt or content summary. 3 different effects shown: static, drop down and slide in.</p>

	<div class="peekblock">
		<a href="#"><img class="peekbehind" src="http://placehold.it/240x150" alt="Placeholder" /></a>
		<h3 class="title">Basic peek effect</h3>
		<p class="snippet">Lorem ipsum dolor sit amet,  eiusmod tempor incididunt consectetur adipisicing elita.</p>
	</div>
	
	<div class="peekblock droptext">
		<a href="#"><img class="peekbehind" src="http://placehold.it/240x150" alt="Placeholder" /></a>
		<h3 class="title">Slide down effect</h3>
		<p class="snippet">Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt, consectetur.</p>
	</div>
	
	<div class="peekblock slidetext">
		<a href="#"><img class="peekbehind" src="http://placehold.it/240x150" alt="Placeholder" /></a>
		<h3 class="title">Slide in effect</h3>
		<p class="snippet">Lorem ipsum dolor sit amet,  ut labore et incididunt consectetur adipisicing elit.</p>
	</div>

style.css

body {
	margin:0 auto;
	padding: 1em 2em;
	color: #777;
	font: 100%/1.5 Arial,sans-serif;
	background: #fafafa
	}

p {
	font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; /*via cssfontstack.com*/
	color: #999
	}

.peekblock, .snippet, .peekbehind {
	position:relative
	}

.peekblock {
	display:inline-block;
/* 	overflow: hidden; */
	width:240px;
	margin-right:20px;
	
	/*Force hardware renderer*/
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}

.title, .snippet {
	margin:0 auto 1.5em
	} /*Lose top margins*/

.snippet {
	position: absolute;
	top: 110px;
	overflow: hidden; 
	height: 3em; /*2 lines shown*/
	z-index:99;	 
	font-size: 0.875em;
	}
	
.snippet:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60%;
  height: 1.2em;
  background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0), rgba(250, 250, 250, 1) 50%); /*Safari*/
  background: linear-gradient(to right, rgba(250, 250, 250, 0), rgba(250, 250, 250, 1) 50%); /*Set to background color*/
	} /*via http://css-tricks.com/line-clampin/*/

.peekbehind {
z-index:100;
-webkit-transition: all .2s ease .1s;
transition: all .2s ease .1s;
	}

.peekbehind:hover, .peekbehind:active, .peekbehind:focus {
	-webkit-transform: translate(0, -3em);
	-ms-transform: translate(0, -3em);
	transform: translate(0, -3em)
	}


/*Additional effect types*/
.droptext .snippet, .slidetext .snippet{
	-webkit-transition: all .2s ease .1s;
	transition: all .2s ease .1s;
	}

.droptext .snippet {
	-webkit-transform: translate(0, -3em);
	-ms-transform: translate(0, -3em);
	transform: translate(0, -3em)
	}

.slidetext .snippet{
	-webkit-transform: translate(3em, 0);
	-ms-transform: translate(3em, 0);
	transform: translate(3em, 0);
	right:3em; /*Set to translate offset. Prevents text leaking from under image. You can use overflow on parent div, but image overflow will be hidden.*/
	}
	
.droptext:hover .snippet, .slidetext:hover .snippet {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);

	right:0 /*Only needed for .slidetext*/
	}