Something Unique on MDN Site

Have you seen how the MDN Site create a very cool thumbnails on it's right bottom side? When the thumbnail is hovered, some descriptions appear without shifting the other elements but overlap above it. Yeah, that's very cool idea. Basically, I can't make a thumbnail gallery that exactly same with MDN Site's, but I can make another similar:

View Demo on JSFiddle

First, we have to build the basic HTML:

<div class="demo">
   <div class="demohover">
       <h2>Pure CSS3 Design Akiyama Mio</h2>
       <p>
           Lorem ipsum dolor sit amet-amet jabang bayi oek-oek.
       </p>
   </div>
   <img src="Screenshot-1.png" alt="image" />
</div>

Then, some CSS codes:

.demo {
  position:relative; /* Set to relative position, so we can absolutize other elemen inside to this element */
  float:left;
  width:180px;
  height:128px;
  margin:10px;
  background-color:white;
  border:1px solid #ddd;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  box-shadow:0px 1px 2px rgba(0,0,0,0.2);    
}

.demo img {
  width:160px;
  height:auto !important;
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;    
}

.demo .demohover {
  width:190px;
  height:auto;
  background-color:white;
  -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  box-shadow:0px 1px 5px rgba(0,0,0,0.2);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  position:absolute;
  top:-5px;
  left:-5px;
  display:none; /* Set to display:none. We'll show this description with JQuery */
}

.demo .demohover h2 {
  font:normal 16px Impact,Arial,Sans-Serif;
  color:#222;
  margin:128px 10px 5px;
  text-transform:uppercase;
}

.demo .demohover p {
  margin:0px 10px 10px;   
}

Add a simple JQuery .hover() function to show and hide the description with .fadeIn() effect:

$(function() {
    $('div.demo').hover(function() {
       // Set the z-index to 10, so the description will always appear on the top
       $(this).css('z-index', 10).find('div.demohover').delay(600).fadeIn('fast');
    }, function() {
        $(this).find('div.demohover').fadeOut('fast', function() {
            // Set the z-index to it's default when mouseleave
            $(this).parent().css('z-index', 1);
        });
    });
});

View Demo on JSFiddle

As you have seen on the demo, every thumbnail description will appear without shifting the other element. That's what I mean.