Thumbnails with pop-up image on mouseover with CSS
.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 shouldn't use position absolute as this declaration removes the element from the document flow. This essentially means the element no longer has a 'foot-print' on the page, hence thumbnails to the right are effectively collapsing in under the now absolutely positioned element.
reggie
Updated on October 19, 2020Comments
-
reggie over 3 years
I have a row of thumbnails (container elements) that are set to float left; The thumbnails are scaled down to fit in a row.
<style type="text/css"> .thumbnails{ float:left; position:relative; } .thumbnails img{ /* ... */ width:65px; height:47px; } </style>
When the user hovers over a thumbnail, I would like to show a pop-up of the thumbnail 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>
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).
How could I create a row of thumbnails with a nice hover-image, while keeping the original position of the thumbnails?