Hover over 1 element
/* this is the parent container, needs to be relative */
.dportfolio-item-list.leases {
position: relative;
}
/* this is the container, needs to be absolute so that it is contained on the parent container above,
for the data that needs to be hidden/shown on hover */
.dportfolio-item-info {
position: absolute;
top: 0;
padding: 131px 0 40px 15px;
display: block;
visibility: hidden; /* hidden by default */
background: rgba(0,0,0,0.4);
}
/* this will show data only for the current item being hovered */
.dportfolio-item-list:hover .dportfolio-item-info {
visibility: visible;
}
REF:
http://stackoverflow.com/questions/8670834/hover-over-only-1-element-with-same-class-jquery
<!-- Parent Container -->
<div class="dportfolio-item-list leases">
<!-- data -->
<div class="dportfolio-item-info">
<h5>COMMERCE CENTER 4</h5>
<div class="proj_excerpt">ADRESS: 423 ave 34st</div>
<div class="proj_excerpt">PRICE: $747,000</div>
<div class="proj_excerpt">TYPE: FOR SALE</div>
</div>
</div>