I currently have a series of thumbnails in a row (within container elements) set to float left. These thumbnails are resized to fit neatly within the row.
<style type="text/css">
.thumbnails{
float:left;
position:relative;
}
.thumbnails img{
/* ... */
width:65px;
height:47px;
}
</style>
My goal is to display a larger version of each thumbnail when a user hovers over it:
<style type="text/css">
/* adding on to the previous styles... */
.th_selector:hover img{
position:absolute;
top:-30px;
left:-30px;
width:150px;
height:113px;
display:block;
z-index:999;
}
</style>
When hovering over a thumbnail, the enlarged image appears as intended. However, I'm encountering two issues: 1) The other thumbnails shift one position to the left, ending up below the pop-up image and potentially causing flickering based on mouse location. 2) In the case of a smaller window with multiple rows of thumbnails, there is an undesirable line-break.
How can I maintain the original positions of all thumbnails while achieving a visually appealing hover effect?