CSS Popup Thumbnails

Question

I have a series of thumbnails (container elements) for which float left is set; Thumbnails are reduced to fit into the string.

<style type="text/css"> .thumbnails{ float:left; position:relative; } .thumbnails img{ /* ... */ width:65px; height:47px; } </style> 

When a user hovers over a thumbnail, I would like to show a sketch popup with its original size:

 <style type="text/css"> /* in addition to the above... */ .th_selector:hover img{ position:absolute; top:-30px; left:-30px; width:150px; height:113px; display:block; z-index:999; } </style> 

As soon as I move the mouse over the thumbnail, a larger image is displayed (as intended). But I have two problems: 1) Other thumbnails jump one position to the left. They fall under the pop-up image. It can also 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).

How can I create a series of thumbnails with a beautiful hover image while maintaining the initial position of the thumbnails?

Answer 1

 .thumbnails { float:left; position:relative; width: 65px; margin-right: 10px; } .thumbnails img{ position:relative; display:block; width:65px; height:47px; } .thumbnails:hover img { top:-25px; left:-40px; width:150px; height:100px; z-index:999; } 

http://jsfiddle.net/functionfirst/V4YaQ/1/

In your code example, you should not use the absolute position, since this declaration removes the element from the document flow. This essentially means that the element no longer has a “foot-print” on the page, so the thumbnails on the right are effectively compressed under the now absolutely positioned element.