"Aviation Classified Cards"
Bootstrap 3.3.0 Snippet by huubl

<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 */ }

Related: See More


Questions / Comments: