title: z-index property does not cause overlap in IE8
body: <pre><code>.thumbnail:hover
  {
      background-color: transparent;  
      z-index: 1;
  }
  </code></pre>
  
  <p>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!</p>
  
  <p>This is the complete styles associated with the thumbnails</p>
  
  <pre><code>.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 : &lt;a id="aPhotos" href="SubscribersPropertyDetail.aspx" class="thumbnail" runat="server"&gt; &lt;img id="imgPhotos" border="0" height='130' width='150' title='Click to view full details about this property' runat="server" /&gt; &lt;span id="spanZoom" runat="server"&gt; &lt;img id="imgzoomphotos" src='~/images/PropertyImages/NoImage.jpg' runat="server" /&gt;&lt;/span&gt; &lt;/a&gt;                                                                                                                                                                  
  </code></pre>