title: Thumbnails with pop-up image on mouseover with CSS
body: <p>I have a row of thumbnails (container elements) that are set to float left;
  The thumbnails are scaled down to fit in a row.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .thumbnails{
          float:left;
          position:relative;
      }
      .thumbnails img{
          /* ... */
          width:65px;
          height:47px;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>When the user hovers over a thumbnail, I would like to show a pop-up of the thumbnail with its original size:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      /* in addition to the above... */
      .th_selector:hover img{
  
          position:absolute;
          top:-30px;
          left:-30px;
  
          width:150px;
          height:113px;
  
          display:block;
          z-index:999;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Once I move the mouse over a thumbnail, the image bigger image is shown (as intended).
  But I have two problems:
  1) The other thumbnails jump one position to the left. They end up below the pop-up image. This can also create a flicker (depending on the position of the mouse pointer).
  2) If the window is too small and if there are two rows of thumbnails, there is a line-break (which is not very nice).</p>
  
  <p>How could I create a row of thumbnails with a nice hover-image, while keeping the original position of the thumbnails?</p>