A Pen by Anonasaurus Rex.

EIhHm.markdown

EIhHm

A Pen by A Non Ymous on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
  
<div class="card">
  <div class="info">
    <h2 class="line-clamp">Headline: Seattle Business Owners Turn To An Unlikely Source Of Consultants: UW Undergrads</h2>
    <p>6 hours ago</p>
  </div>
</div>
  
<div class="card">
  <div class="info">
    <h2 class="line-clamp">Headline: Seattle Business Owners Turn To An Unlikely Source Of Consultants: UW Undergrads</h2>
    <p>6 hours ago</p>
  </div>
</div>
  
<div class="card">
  <div class="info">
    <h2 class="line-clamp">Headline: Seattle Business Owners Turn To An Unlikely Source Of Consultants: UW Undergrads</h2>
    <p>6 hours ago</p>
  </div>
</div>

style.css

.card {
  background: gray;
  height: 200px;
  width:300px;
  background-image:url(http://placekitten.com/300/200);
  position:relative;
  float:left;
  margin:10px;
}

.info {
  position:absolute;
  bottom:0;
  height:100px;
  padding: 20px;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 31%, rgba(0,0,0,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(31%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1)));
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 100%);
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 100%);
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 31%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

.info h2 {
  color: white;
  font-size:18px;
  font-weight:400;
  font-family: 'Lato', sans-serif;
  height:65px;
  width:100%;
  overflow:hidden;
}

.info p {
  color: #777;
  font-family: 'Lato', sans-serif;
  position:absolute;
  bottom:0;
}

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}