<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container container-pad" id="property-listings"> <div class="row"> <div class="col-sm-12 padd-0 brdr bgc-fff btm-mrg-20 box-shad"> <div class="view"> <div class="caption"> <h3>Wiseberry</h3> <a href="" rel="tooltip" title="Add to Favorites"><span class="fa fa-heart-o fa-2x"></span></a> <a href="" rel="tooltip" title="View"><span class="fa fa-search fa-2x"></span></a> </div> <img src="http://www.dealerfront.com/imageServer/jv7zoxai/640/1459985994_500281-2.jpg" class="img-responsive"> <div class="propertyType house">House</div> </div> <div class="detail"> <div class="info"> <p class="small upperc" style="text-overflow: ellipsis">CASTLE HILL</p> <p class="small upperc wb-red">30/1-7 Hume Ave</p> <span class="wb wb-beds pull-right"> <strong>4</strong> </span> <span class="wb wb-baths pull-right"> <strong>3</strong> </span> <p class="small hidden-xs">Impressively positioned overlooking 3.5 captivating acres, designated as "significant" by the chestnut hill historical s...</p> </div> <div class="stats wb-red-bg"> <span class="fa fa-heart-o" rel="tooltip" title="Liked"> <strong>47</strong></span> <span class="fa fa-eye" rel="tooltip" title="Viewed"> <strong>137</strong></span> <span class="fa fa-photo pull-right" rel="tooltip" title="Photos"> <strong>12</strong></span> </div> </div> </div> </div> </div>

/**** BASE ****/ body { color: #888; } a { color: #03a1d1; text-decoration: none!important; } . /**** LAYOUT ****/ .list-inline>li { padding: 0 10px 0 0; } .container-pad { padding: 30px 15px; } /**** MODULE ****/ .bgc-fff { background-color: #fff!important; } .box-shad { -webkit-box-shadow: 1px 1px 0 rgba(0,0,0,.2); box-shadow: 1px 1px 0 rgba(0,0,0,.2); } .brdr { border: 1px solid #ededed; } .padd-0 { padding: 0; } .upperc { text-transform: uppercase; } /* Font changes */ .fnt-smaller { font-size: .9em; } .fnt-lighter { color: #bbb; } /* Padding - Margins */ .pad-10 { padding: 10px!important; } .mrg-0 { margin: 0!important; } .btm-mrg-10 { margin-bottom: 10px!important; } .btm-mrg-20 { margin-bottom: 20px!important; } /* Color */ .clr-535353 { color: #535353; } .coralbg { background-color: #FA396F; } .coral { color: #FA396f; } .turqbg { background-color: #46D8D2; } .turq { color: #46D8D2; } .wb-red-bg { background-color: #822433; } .wb-red { color: #822433; } .white { color: #fff!important; } /* Custom Layout */ .view { display: inline-block; width: 33.0%; overflow:hidden; } .view p { margin-top: 20px; margin-bottom: 0; } .caption { position:absolute; top:0; left:0; background: rgba(98, 98, 98, 0.44); width:33%; height:100%; padding:2%; display: none; text-align:center; color:#fff !important; z-index:2; } .caption h3 { padding-top: 20px; } .caption a { padding: 0 20px; color: #fff; } .detail { display: inline-block; width: 66%; overflow:hidden; } .propertyType { color: #ffffff; display: inline-block; height: 20px; padding: 0 10px; position: absolute; text-align: center; top: 0px; width: 100px; } .propertyType.house { background-color: red; } .propertyType.land { background-color: orange; } .propertyType.unit { background-color: green; } .propertyType.commercial { background-color: blue; } .info { display: block; padding: 10px; background: #eee; height: 104px; font-weight: 300; } .info p, .stats p { margin-bottom: 0; } .stats { display: block; padding: 10px; color: white; } .wb { display: inline-block; color: #675c53; font-family: "wiseberry-icons" !important; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; top: -35px; } .wb.pull-right { margin-left: .3em; margin-right: .3em; } .share-links { border: 1px solid #eee; padding: 15px; margin-top: 15px; } .square, .btn { border-radius: 0px!important; } /**** MEDIA QUERIES ****/ @media only screen and (max-width: 991px) { #property-listings .property-listing { padding: 5px!important; } #property-listings .property-listing a { margin: 0; } #property-listings .property-listing .media-body { padding: 10px; } } @media only screen and (min-width: 992px) { #property-listings .property-listing img { max-width: 180px; } }

$(document).ready(function() { var $btnSets = $('#responsive'), $btnLinks = $btnSets.find('a'); $btnLinks.click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.user-menu>div.user-menu-content").removeClass("active"); $("div.user-menu>div.user-menu-content").eq(index).addClass("active"); }); }); $( document ).ready(function() { $("[rel='tooltip']").tooltip(); $('.view').hover( function(){ $(this).find('.caption').slideDown(250); //.fadeIn(250) }, function(){ $(this).find('.caption').slideUp(250); //.fadeOut(205) } ); });