title: <HTML> Thumbnail rollover image is appearing only in the left of screen
body: <p>I'm learning how to design a website using Dreamweaver CS6. I wanted to make a photo gallery that has the thumbnails shown on the page, but when you roll the mouse over them, it displays the full sized image on the left and a little bellow of the thumbnail. Here's what I found while searching the Web (it was probably found here, but I don't remember who posted, so if you posted it, all the credit goes to you).</p>
  
  <p>I got this in my HTML code:  </p>
  
  <pre><code>   &lt;table&gt;   
     &lt;tr&gt; 
     &lt;td&gt;  
          &lt;a class="thumbnail" href="#thumb"&gt;
             &lt;img src="productURL" width="100px" height="142px" border="0" /&gt;
             &lt;span&gt;
                &lt;img src="productURL" /&gt;
                &lt;br /&gt;
                &lt;font face="arial"&gt;productname
                &lt;/span&gt;&lt;/a&gt;
             &lt;/font&gt;
      &lt;/td&gt; 
      &lt;td&gt;  
          &lt;a class="thumbnail" href="#thumb"&gt;&lt;img src="productURL" width="100px" height="142px" border="0" /&gt;&lt;span&gt;
          &lt;img src="productURL" /&gt;&lt;br /&gt;&lt;font face="arial"&gt;
          productname&lt;/span&gt;&lt;/a&gt;&lt;/font&gt;
      &lt;/td&gt; 
      &lt;td&gt;  
          &lt;a class="thumbnail" href="#thumb"&gt;&lt;img src="productURL" width="100px" height="142px" border="0" /&gt;&lt;span&gt;
          &lt;img src="productURL" /&gt;&lt;br /&gt;&lt;font face="arial"&gt;
          productname&lt;/span&gt;&lt;/a&gt;&lt;/font&gt;
      &lt;/td&gt; 
      &lt;td&gt; 
          &lt;a class="thumbnail" href="#thumb"&gt;&lt;img src="productURL" width="100px" height="142px" border="0" /&gt;&lt;span&gt;
          &lt;img src="productURL" /&gt;&lt;br /&gt;&lt;font face="arial"&gt;
          productname&lt;/span&gt;&lt;/a&gt;&lt;/font&gt;
      &lt;/td&gt;  
      &lt;/tr&gt;  
      &lt;table&gt;  
  </code></pre>
  
  <p>And then this on my CSS:</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;    
  left: 1000px;    
  border: 1px dashed gray;    
  visibility: hidden;    
  color: black;    
  text-decoration: none;    
  }
  
  .thumbnail span img{     
  border-width: 0;    
  padding: 2px;    
  }
  
  .thumbnail:hover span {    
  visibility: visible;    
  top: 300px;    
  left: 107px;
  }
  </code></pre>
  
  <p>I thought this was a pretty good code, however I can't figure out how to make the image pop up right next to the thumbnail. I tried to create a "subclass" called "span_2" but it didn't come out right, and messed the whole page.</p>
  
  <p>I think this is a big question, but I need help. I started playing around with HTML this week.</p>
  
  <p>EDIT</p>
  
  <p>Is there any function where I can pick the location of the thumbnail and set the picture to be displayed right next to it?</p>