<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 ---------->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<link href="http://www.wiseberry.com.au/css/wiseberry-icons.css" rel="stylesheet" media="screen">
<div class="container-fluid" style="background-color:#e8e8e8">
<div class="container container-pad" id="property-listings">
<div class="row">
<div class="col-md-6 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://lorempixel.com/400/300/food" 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 class="col-md-6 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://lorempixel.com/400/300/food" 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 class="row">
<div class="col-md-6 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://lorempixel.com/400/300/food" 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 class="col-md-6 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://lorempixel.com/400/300/food" 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><!-- End container -->
</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)
}
);
});
