.thumbnail{
            position: relative;
            z-index: 0;
        }

        .thumbnail:hover{
            background-color: transparent;
            z-index: 50;
        }

        .thumbnail span{ /*CSS for enlarged image*/
            height:114px;
            width:106px;         
            position: absolute;
            background-color: white;
            padding: 5px;
            left: -1000px;
            border: 1px solid gray;
            visibility: hidden;
            color: black;
            text-decoration: none; 
        }

        .thumbnail span img{ /*CSS for enlarged image*/
            border-width: 0;
            padding: 2px;
        }

        .thumbnail:hover span{ /*CSS for enlarged image on hover*/
            visibility: visible;
            top: -135px;
            left: 0px; /*position where enlarged image should offset horizontally */
        }

/* This is where you can customize the appearance of the tooltip */
div#tipDiv {
  position:absolute; visibility:hidden; left:0; top:0; z-index:10000;
  background-color:#fff; border:1px solid #000; 
  width:220px; height:140px; padding:6px;
  color:#000; font-size:11px; line-height:1.3;
}
/* These are used in the wrapTipContent function */
div#tipDiv div.img { text-align:center }
div#tipDiv div.txt { text-align:center; margin-top:4px }