.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail div{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -500px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail div img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/
visibility: visible;
/*top: #INT((thumbnailheight/2)-photoheight)#px;
left: #INT((thumbnailwidth/2)-photowidth)#px; position WHERE enlarged image is above and to the left*/
/*top: #INT((thumbnailheight/2)-photoheight)#px;
left: -#INT((photowidth-thumbnailwidth)/2)#px; position WHERE enlarged image is above and centered*/
/*top: #INT((thumbnailheight/2)-photoheight)#px;
left: #INT(thumbnailwidth/2)#px; position WHERE enlarged image is above and to the right*/
/*top: -#INT((photoheight-thumbnailheight)/2)#px;
left: #INT((thumbnailwidth/2)-photowidth)#px; position WHERE enlarged image is centered and to the left*/
/*top: -#INT((photoheight-thumbnailheight)/2)#px;
left: -#INT((photowidth-thumbnailwidth)/2)#px; position WHERE enlarged image is centered and centered*/
/*top: -#INT((photoheight-thumbnailheight)/2)#px;
left: #INT(thumbnailwidth/2)#px; position WHERE enlarged image is centered and to the right*/
/*top: #INT(thumbnailheight/2)#px;
left: #INT((thumbnailwidth/2)-photowidth)#px; position WHERE enlarged image is below and to the left*/
/*top: #INT(thumbnailheight/2)#px;
left: -#INT((photowidth-thumbnailwidth)/2)#px; position WHERE enlarged image is below and centered*/
/*top: #INT(thumbnailheight/2)#px;
left: #INT(thumbnailwidth/2)#px; position WHERE enlarged image is below and to the right*/
}
#g{
color : White;
}