<div class="recipe-card">
  <div class="recipe-image">
    <div class="recipe-overlay">
      <div class="recipe-title">
        <h3>Crockpot Chipotle Burrito Bowls</h3>
        <ul>
          <li><i class="entypo-clock"></i> 22 Mins</li>
          <li><i class="entypo-menu"></i> 12 Ingredients</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="recipe-author">
    <a href="#" class="avatar-frame">
      <img src="http://www.gravatar.com/avatar/e971b1b59ef6876038eef74dfcb1b7a0?s=40"> Braunson Y.
    </a>
    <a href="#" class="button"><i class="entypo-right-open-mini"></i> Cook It</a>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Muli);
@import url(http://weloveiconfonts.com/api/?family=entypo);

body {
  background:rgba(0,0,0,0.3) url(http://www.konig-fashion.com/wp-content/uploads/2013/06/Blurry-Blue-Background-IV-1170x731.jpg) top center no-repeat;
  color:#fff;
  padding-top:50px;
}

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  font-weight:none;
  font-style:normal;
  opacity:0.7;
}
.avatar-frame,
.avatar-frame img{
  font-family: 'Muli', sans-serif;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 30px; /* Saf3+, Chrome */
  border-radius: 30px; /* Opera 10.5, IE 9 */
  /*-moz-border-radius: 30px;  Disabled for FF1+ */
  vertical-align:middle;
}
.avatar-frame img { margin-right:5px; }


a, a:hover { text-decoration:none; color:#000; }
li { display:inline; margin-right:10px; font-size:10.5pt;   font-family: 'Muli', sans-serif;
 }
ul{ margin:0 15px 0 15px; padding:0; }

h3 {
  font-family: 'Muli', sans-serif;
  font-weight:normal;
  font-size:21pt;
  padding: 10px 15px 10px 15px;
  margin:0;
  text-shadow: 1px 0px 2px rgba(150, 150, 150, 1);
}
.recipe-card {
  position:relative;
  width:300px;
  background-color:#fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  border-radius:4px;
  margin:0 auto;
}

.recipe-image {
  overflow:hidden;
  position:relative;
  clear:both;
  background-image: url('http://rippedrecipes.com/images/snaps/medium_marinated-shiitake-mushroom-burger_P0vWU1WRj69QP.jpg');
  height:340px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.recipe-overlay {
  height:100%;
  background:transparent;
  background: linear-gradient(top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -moz-linear-gradient(top, rgba( 0, 0, 0, 0) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -ms-linear-gradient(top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -o-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  background: -webkit-linear-gradient( top, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% );
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
  margin:0;
  padding:0;
}

.recipe-title {
  position: absolute; 
  bottom: 15px; 
  left: 0;

}

.recipe-author {
  height:30px;
  padding:15px 20px 20px 20px;
}

.button {
  float:right;
  border-radius:4px;
  color:#fff;
  padding:5px 10px 5px 10px;
  font-weight:bold;
  background-color:#ff5b76;
}
.button:hover {
  color:#fff;
}