9/3/2015 - 3:42 PM

Hover over 1 element

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; 


<!--  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>