<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400|Source+Sans+Pro:300,400" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<!--feed item 1-->
<a href="#" class="feed_itm col-sm-4" style="background-image: url('http://www.franktiano.com/planesforsale/P47xl_2med.jpg')">
<div class="feed_itm_inr gradient-black">
<button class="btn btn_fav">
<i class="fa fa-heart fa-1x" aria-hidden="true"></i>
<i class="fa fa-heart-o fa-1x hidden" aria-hidden="true"></i>
</button>
<div class="item_desc">
<h4 class="feed_itm_ttl">Republic P-47 Thunderbolt</h4>
<p class="feed_itm_prc">$2,100,000 - by dealer</p>
</div>
<div class="item_dtls">
<dl class="pull-left">
<dt>2,453</dt>
<dd>TT</dd>
</dl>
<dl class="pull-left">
<dt>362</dt>
<dd>TSOH</dd>
</dl>
</div>
</div>
</a><!--@end feed item-->
<!--feed item 2-->
<a href="#" class="feed_itm col-sm-8" style="background-image: url('http://site.privatejetdaily.com/wp-content/uploads/2013/06/private-jet1.jpg')">
<div class="feed_itm_inr gradient-black">
<button class="btn_fl btn_fav" js-item-fav>
<i class="fa fa-heart-o fa-1x" aria-hidden="true"></i>
<i class="fa fa-heart fa-1x hidden" aria-hidden="true"></i>
</button>
<div class="item_desc">
<span class="label label-success"><i class="fa fa-arrow-down"></i> Price Drop</span>
<h4 class="feed_itm_ttl">Bombardier Learjet 60</h4>
<p class="feed_itm_prc">$1,300,000 - by dealer</p>
</div>
<div class="item_dtls">
<dl class="pull-left">
<dt>7,865.8</dt>
<dd>TT</dd>
</dl>
<dl class="pull-left">
<dt>6,135</dt>
<dd>Cycles</dd>
</dl>
</div>
</div>
</a><!--@end feed item-->
<!--feed item 3-->
<a href="#" class="feed_itm col-sm-4" style="background-image: url('http://www.viproair.com/wp-content/uploads/2011/02/112_1228_resize-446x2911.jpg')">
<div class="feed_itm_inr gradient-black">
<button class="btn_fl btn_fav" js-item-fav>
<i class="fa fa-heart-o fa-1x" aria-hidden="true"></i>
<i class="fa fa-heart fa-1x hidden" aria-hidden="true"></i>
</button>
<div class="item_desc">
<span class="label label-warning"><i class="fa fa-clock-o"></i> Sale Pending</span>
<h4 class="feed_itm_ttl">Piper PA-28</h4>
<p class="feed_itm_prc">$55,000 - by owner</p>
</div>
<div class="item_dtls">
<dl class="pull-left">
<dt>2,453</dt>
<dd>TT</dd>
</dl>
<dl class="pull-left">
<dt>362</dt>
<dd>TSOH</dd>
</dl>
</div>
</div>
</a><!--@end feed item-->
<!--feed item 4-->
<a href="#" class="feed_itm col-sm-4" style="background-image: url('http://www.cap-ny153.org/Glass%20Cockpit%20Cessna%20172.jpg')">
<div class="feed_itm_inr gradient-black">
<button class="btn_fl btn_fav" js-item-fav>
<i class="fa fa-heart-o fa-1x" aria-hidden="true"></i>
<i class="fa fa-heart fa-1x hidden" aria-hidden="true"></i>
</button>
<div class="item_desc">
<h4 class="feed_itm_ttl">Glass Panel Cessna 172</h4>
<p class="feed_itm_prc">$120,000 - by owner</p>
</div>
<div class="item_dtls">
<dl class="pull-left">
<dt>2,453</dt>
<dd>TT</dd>
</dl>
<dl class="pull-left">
<dt>362</dt>
<dd>TSOH</dd>
</dl>
</div>
</div>
</a><!--@end feed item-->
<!--feed item 5-->
<a href="#" class="feed_itm col-sm-4" style="background-image: url('http://planesandchoppers.com.s3.amazonaws.com/8814.jpg')">
<div class="feed_itm_inr gradient-black">
<button class="btn_fl btn_fav" js-item-fav>
<i class="fa fa-heart-o fa-1x hidden" aria-hidden="true"></i>
<i class="fa fa-heart fa-1x" aria-hidden="true"></i>
</button>
<div class="item_desc">
<h4 class="feed_itm_ttl">1984 Piper Malibu</h4>
<p class="feed_itm_prc">$284,000 - by owner</p>
</div>
<div class="item_dtls">
<dl class="pull-left">
<dt>2,453</dt>
<dd>TT</dd>
</dl>
<dl class="pull-left">
<dt>362</dt>
<dd>TSOH</dd>
</dl>
</div>
</div>
</a><!--@end feed item-->
<!--feed item 6-->
<a href="#" class="feed_itm col-sm-8" style="background-image: url('http://beechcraft.txtav.com/~/media/beechcraft/images/aircraft/king-air/c90-gtx/exterior-gallery/kac90gtx-ext-gallery-pg4_image1_01.ashx')">
<div class="feed_itm_inr gradient-black">
<button class="btn_fl btn_fav" js-item-fav>
<i class="fa fa-heart-o fa-1x" aria-hidden="true"></i>
<i class="fa fa-heart fa-1x hidden" aria-hidden="true"></i>
</button>
<div class="item_desc">
<h4 class="feed_itm_ttl">2011 Beechcraft King Air 350I</h4>
<p class="feed_itm_prc">$4,725,000 - by dealer</p>
</div>
<div class="item_dtls">
<dl class="pull-left">
<dt>1,310</dt>
<dd>TT</dd>
</dl>
<dl class="pull-left">
<dt>855</dt>
<dd>Cycles</dd>
</dl>
</div>
</div>
</a><!--@end feed item-->
<!--feed item 7-->
<a href="#" class="feed_itm col-sm-4" style="background-image: url('http://www.centraljetcharter.com/images/bonanza-interior.jpg')">
<div class="feed_itm_inr gradient-black">
<button class="btn_fl btn_fav" js-item-fav>
<i class="fa fa-heart-o fa-1x" aria-hidden="true"></i>
<i class="fa fa-heart fa-1x hidden" aria-hidden="true"></i>
</button>
<div class="item_desc">
<h4 class="feed_itm_ttl">1993 Beechcraft B36TC Bonanza</h4>
<p class="feed_itm_prc">$340,000 - by owner</p>
</div>
<div class="item_dtls">
<dl class="pull-left">
<dt>2,200</dt>
<dd>TT</dd>
</dl>
<dl class="pull-left">
<dt>75</dt>
<dd>TSOH</dd>
</dl>
</div>
</div>
</a><!--@end feed item-->
</div>
</div>
body {
font-family: 'Source Sans Pro', sans-serif;
/*font-family: 'Lato', sans-serif;*/
}
.feed_itm {
position:relative;
background: no-repeat center center;
background-size:cover;
border: 1px solid white ;
background-color: black;
padding: 0px;
margin: 0px;
height:250px;
text-align: center;
vertical-align: bottom;
}
.feed_itm_inr {
width: 100%;
height: 100%;
padding: 10px;
background-color: rgba(3,3,3,0.0);
color: white;
}
.feed_itm:hover .feed_itm_inr {
background-color: rgba(3,3,3,0.3);
}
.feed_itm:hover > .feed_itm_inr:before {
position: absolute;
top: 35%;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size:4em;
color: rgba(255,255,255,0.8);
font-family: FontAwesome;
content: "\f002";
}
.feed_itm_ttl {
margin: 5px 0 0 0;
}
.feed_itm_prc {
margin: 0!important;
}
.image-block dl, .item_dtls dl {
margin: 0 0 0 10px!important;
}
.item_desc {
padding: 0 0 10px 10px;
}
.item_dtls {
padding: 0 10px 10px 0;
}
.feed_itm_ttl, .item_dtls dt {
font-size:1.2em;
font-weight: 200!important;
letter-spacing: .02em;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5);
}
.item_desc *, .item_dtls * {
line-height: 1.4!important;
}
.feed_itm_prc, .item_dtls dd {
font-size: 14px!important;
font-weight:100;
color: #BFCFD1;
}
.item_desc
{
text-align: left;
padding-left: 10px;
position: absolute;
bottom: 0;
left: 0;
}
.feed_itm_inr .item_dtls {
padding-right: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.feed_itm_inr .btn_fav {
display: block;
margin: 10px 10px 0 0;
position: absolute;
top: 0;
background-color:transparent;
border:none;
color: white;
}
.feed_itm_inr .btn_fav {
right: 0;
width: 18px;
padding: 0!important;
}
.btn_fav .fa-heart {
color: rgba(239, 51, 26, 0.75);
}
.feed_itm_inr.gradient-black{
position: absolute;
bottom: 0px;
width: 100%;
height:100%;
background: -moz-linear-gradient(top,rgba(0,0,0,0) 65%, rgba(0,0,0,0.55) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 65%,rgba(0,0,0,0.55) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,rgba(0,0,0,0) 65%,rgba(0,0,0,0.55) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
