title: Scroll horizontally across image thumbnails and have images pop up on mouse hover
body: <p>I have written some code in html and css to scroll horizontally across image thumbnails and have them pop up on mouse hover. The problem is that when I can scroll horizontally, then the popped up (enlarged) image on mouse hover is only visible within the div that it is contained in. I would like for it to be visible on top of everything else on the page. But since I created the scroll bar by making the property of the div overflow-x:scroll,you would have to scroll to see the enlarged image if it is larger than the div. When I don't see the overflow-x property to scroll, I can view the enlarged image on top of everything else like I want to but all the other thumbnails are also visible. Here is a code snippet to show what I've done.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="example1"&gt;
  &lt;h1&gt;This is an example&lt;/h1&gt;
  &lt;h2&gt;Car 1&lt;/h2&gt;
  &lt;div class="scroll"&gt;
  &lt;div id="example1_car1"&gt;
  &lt;a class="thumb" href="#"&gt;&lt;img src="car1.jpg" alt="car1" height="200" width="251"&gt;&lt;span&gt;   &lt;img src="car1.jpg" alt="car1"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;a class="thumb" href="#"&gt;&lt;img src="car2.jpg" alt="car2" height="200" width="251"&gt;&lt;span&gt;&lt;img src="car2.jpg" alt="car2"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;a class="thumb" href="#"&gt;&lt;img src="car3.jpg" alt="car3" height="200" width="251"&gt;&lt;span&gt;&lt;img src="car3.jpg" alt="car3"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;!--example1_car1--&gt;
  &lt;/div&gt;&lt;!--example1_scroll--&gt;
  &lt;h2&gt;Car 2&lt;/h2&gt;
  &lt;div class="scroll"&gt;
  &lt;div id="example1_car2"&gt;
  &lt;a class="thumb" href="#"&gt;&lt;img src="car1.jpg" alt="car1" height="200" width="251"&gt;&lt;span&gt;&lt;img src="car1.jpg" alt="car1"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;a class="thumb" href="#"&gt;&lt;img src="car2.jpg" alt="car2" height="200" width="251"&gt;&lt;span&gt;&lt;img src="car2.jpg" alt="car2"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;a class="thumb" href="#"&gt;&lt;img src="car3.jpg" alt="car3" height="200" width="251"&gt;&lt;span&gt;  &lt;img src="car3.jpg" alt="car3"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;!--example1_car2--&gt;
  &lt;/div&gt;&lt;!--example2_scroll--&gt;
  &lt;/div&gt;&lt;!--example1--&gt;
  
  CSS
  #example1_car1,#example1_car2,.scroll{
     position:relative;
  }
  
  #example1_car1, #example1_car2
  {
    width:2400px;
    height:200px;
    z-index:0
  }
  
  .scroll
  {
     width:800px;
     height:210px;
  
     overflow-x:scroll;
     z-index:0;
  }
  
  .thumb img {
      border:1px solid #000;
      margin:3px;
      float:left;
      zindex:-1;
  }
  .thumb span {
      position: relative;/*absolute;*/
      display:none;
  }
  .thumb:hover, .thumb:hover span {
      display:inline;
      top:0; left: 0px;
      /*z-index:1;*/
      z-index:10;
  }
  </code></pre>
  
  <p>Any help would be much appreciated.</p>