Question

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

I have specified this style to make an image overlap another image on mouse hover. It works perfectly in all other browsers except in IE8. I tried specifying higher value for z-index but it did not work out!

This is the complete styles associated with the thumbnails

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

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

.thumbnail span {
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    right: -500px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img {
    border-width: 0;
    padding: 2px;
    width: 400px;
    height: 300px;
}

.thumbnail:hover span {
    visibility: visible;
    top: 0;
    right: -290px;
    vertical-align: top;}
 The HTML part for the CSS is mentioned below : <a id="aPhotos" href="SubscribersPropertyDetail.aspx" class="thumbnail" runat="server"> <img id="imgPhotos" border="0" height='130' width='150' title='Click to view full details about this property' runat="server" /> <span id="spanZoom" runat="server"> <img id="imgzoomphotos" src='~/images/PropertyImages/NoImage.jpg' runat="server" /></span> </a>                                                                                                                                                                  

Answer 1

I added z-index property to thumbnail: hover span style to a higher value than that of thumbnail style. This worked out!!
.thumbnail:hover span{ /CSS for enlarged image on hover/
visibility: visible;
top: -140px; /*position where enlarged image should offset horizontally */
left: -500px;
z-index: 51;
}